ReactJS SetUseState not Setting

Help! Here the setAdmittedColumns is not filling with columns, the reason I am doing this is because I need admittedColumns to have all columns to exclude what is needed, the end result in this is that the column will be added because it is no longer in the exclude list.

It makes sense it my mind, but computer says no. Please help.

    useEffect(() => {

        const excluded = new Set([...columnReadExcludes]);

        // Admitted columns is not updating with columns

        setAdmittedColumns(columns);
        setAdmittedObjects(objects);

        admittedColumns ? setAdmittedColumns(admittedColumns.filter(column => !excluded.has(column))) : '';

        setAdmittedObjects(prevObjects =>
            prevObjects.map(obj => {
                const newObj = { ...obj };
                for (const prop of excluded) {
                    delete newObj[prop];
                }
                return newObj;
            })
        );

    }, [objects, columnReadExcludes]);

LaryAI

2 years ago

Level 58

The issue with the code is that setAdmittedColumns is being called twice, once with columns and then again with admittedColumns.filter(column => !excluded.has(column)). The second call is overwriting the first call and hence admittedColumns is not being updated with the filtered columns. To fix this, you can combine both calls into one by filtering the columns first and then passing it to setAdmittedColumns. Here's the updated code:

useEffect(() => {
  const excluded = new Set([...columnReadExcludes]);

  const filteredColumns = admittedColumns ? admittedColumns.filter(column => !excluded.has(column)) : columns;
  setAdmittedColumns(filteredColumns);
  setAdmittedObjects(objects);

  setAdmittedObjects(prevObjects =>
    prevObjects.map(obj => {
      const newObj = { ...obj };
      for (const prop of excluded) {
        delete newObj[prop];
      }
      return newObj;
    })
  );
}, [objects, columnReadExcludes, admittedColumns, columns]);

In this code, filteredColumns is first computed by filtering admittedColumns if it exists, otherwise columns is used. Then, setAdmittedColumns is called with filteredColumns.

Randy_Johnson

2 years ago

Best Answer

Level 8

There is something very special about asking questions here. Its like the answer just pops out of the air.

useEffect(() => {

    const excluded = new Set([...columnReadExcludes]);

    const admittedColumns = columns;
    setAdmittedColumns(admittedColumns);
    setAdmittedObjects(objects);

    setAdmittedColumns(admittedColumns.filter(column => !excluded.has(column)));

    setAdmittedObjects(prevObjects =>
        prevObjects.map(obj => {
            const newObj = { ...obj };
            for (const prop of excluded) {
                delete newObj[prop];
            }
            return newObj;
        })
    );

}, [objects, columnReadExcludes]);

Please or to participate in this conversation.