反应：调用状态更改方法时，useState 数组不会更改

Question

当状态改变方法开始调用时，数组状态不会改变:

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

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

我使用我的方法:

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);
}
};

也许问题出在推?我应该做setArrayOfDocuments(...arr); or setArrayOfDocuments(prev => [...prev,...arr])，但如果这样做，我想它会在无限渲染，因为我传递pushToArrayOfDocuments的子组件。像这样:

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

编辑:这样做:setArrayOfDocuments([...arr]);我得到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.如有任何帮助，不胜感激。

Answer 1

首先，您不应该直接改变useState的状态，将它们用作不可变的实体。如果您想使用它作为初始值，请将其克隆到:

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

其次，您将相同的状态数组传递给setter，那么状态将不会更新。克隆状态将解决第二个问题。

最后，从旧值构造新状态的最佳方法是使用函数:

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

将避免使用不是最新的值。最后，您将得到:

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;
}
)
}
};

Answer 2

在将数组添加到state之前，需要先克隆数组。

const arr = arrayOfDocuments.slice();

完整片段:

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);
}
};

Answer 3

我添加了一个类似的问题，我通过

解决了不是

const arr = arrayOfDocuments

尝试扩展初始数组

const arr =[…arrayOfDocuments]