CODEWITHSUNDEEP
javascriptreactjsnext.js
Singh
Singh

Reputation: 860

React: useState array doesn't change when state change method called

Array state doesn't change when state change method is beign called :

const [arrayOfDocuments, setArrayOfDocuments] = useState([]);

i tried : setArrayOfDocuments(...[]); or setArrayOfDocuments([]);

where i use my method :

  const pushToArrayOfDocuments = (obj) => {
    const arr = arrayOfDocuments;
    if (obj.filename && obj.file && obj.expiredate && obj.doctype) {
      const index = arr.map((e) => e.filename).indexOf(obj.filename);
      if (index !== -1) {
        arr[index] = obj;
      } else {
        arr.push(obj);
      }
      setArrayOfDocuments(arr);
    }
  };

Maybe the problem is push? and i should do setArrayOfDocuments(...arr); or setArrayOfDocuments(prev => [...prev,...arr]) but if doing so i guess it will go in infinte rendering as i'm passing pushToArrayOfDocuments to the subcomponents. Like this :

OperatorDocument
                  key={`Durc${count}`}
                  title="Durc"
                  description="Descrizione Durc"
                  setDocument={pushToArrayOfDocuments}
                  document={getObjectByName('Durc')}
                  filedocname="Durc"
                />

edit : doing like this : setArrayOfDocuments([...arr]); i get Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. Any help is appreciated.

Upvotes: 1

Views: 1991

Answers (3)

SniperHerz
SniperHerz

Reputation: 172

Firstly, you should never mutate useState's state directly, use them as immutable entities. If you want to use it as initial value, clone it before:

const arr = [...arrayOfDocuments]
// or
const arr = arrayOfDocuments.slice()

Secondly, you are passing the same state array to the setter, then the state will not be updated. Cloning the state will solve this second point.

Finally, the best way to construct a new state from the old value is using a function:

setState(oldValue => (/* construct new state based on old value */))

this will avoid using a value that is not up to date. At the end, you will have:

const pushToArrayOfDocuments = (obj) => {
  if (obj.filename && obj.file && obj.expiredate && obj.doctype) {
    setArrayOfDocuments(oldArr => {
        const arr = oldArr.slice();
        const index = arr.map((e) => e.filename).indexOf(obj.filename);

        if (index !== -1) {
          arr[index] = obj;
        } else {
          arr.push(obj);
        }

        return arr;
      }
    )
  }
};

Upvotes: 3

Alexandru Bulat
Alexandru Bulat

Reputation: 89

You need to clone your array before adding it to state.

const arr = arrayOfDocuments.slice();

Full snippet:

const pushToArrayOfDocuments = (obj) => {
  if (obj.filename && obj.file && obj.expiredate && obj.doctype) {
    const arr = arrayOfDocuments.slice();
    const index = arr.findIndex(({ filename }) => filename === obj.filename);

    if (index > -1) {
      arr[index] = obj;
    } else {
      arr.push(obj);
    }

    setArrayOfDocuments(arr);
  }
};

Upvotes: 1

derFrosty
derFrosty

Reputation: 548

I add a similar problem, and I solved by

instead of

const arr = arrayOfDocuments

try spreading the initial array

const arr = [...arrayOfDocuments]

Upvotes: 0

Related Questions