我遇到了一个问题，我存储为useState对象的数组只更新了它的最后一个元素.在下面的示例中，我们维护在Sub中更新的对象array.如果我们将这样的for循环更改为遍历arr中的所有元素，则arr中的最后一个元素将是更新的only个元素，这是一致的行为.
function Sub({arr, setArr}) {
useEffect(() => {
for(let i = 0; i < 2; i++){
const arr_copy = arr.slice()
arr_copy[i] = i
setArr(arr_copy)
}
},[])
return <p> </p>
}
export function App(props) {
const [arr, setArr] = useState(["NOT CHANGED","NOT CHANGED"])
return (
<div className='App'>
{arr.map((d) => <p> {d} </p>)}
<Sub arr={arr} setArr = {setArr}/>
</div>
);
}
渲染:
NOT CHANGED
1
我在this个线程中try 了建议的答案--这些都是"向setFunction传递回调"、"首先将数组设置为空数组"、"创建深度副本"的不同变体，似乎都不起作用(所有这些都导致数组的最后一个元素的行为相同，唯一更改的元素).
作为进一步的说明，我在填充和更新字典而不是列表时得到了相同的useState({...})行为.