编辑：下一个版本是 13.3.0
我有一个名为 localArray 的状态，我只想更新到特定索引，因此我想到创建一个时间变量来修改该数组并使用时间值更新状态，问题是，这个状态直到另一个状态更新或快速刷新后才会更新，我不知道为什么会发生这种情况
这是一个最小的可重现示例：
import { useState } from 'react'
function Test()
{
const [someState, setSomeState] = useState("");
const [localArray, setLocalArray] = useState(["","","",""])
const handleArrayChanges = ( { target: { name, value } } ) => {
let newArray = localArray;
newArray[Number(name)] = value;
setLocalArray(newArray);
}
return (
<div>
<h4>Array state</h4>
<textarea name='0' onChange={handleArrayChanges}/>
<p> {localArray[0]}</p>
<h4>Some other state</h4>
<button onClick={() => {setSomeState("a")}}>Update some other state</button>
</div>
)
}
export default Test
正如您所看到的，在数组状态更新后，第一个元素应该显示在段落上，但直到解释了顺式情况才显示
React 建立在状态不可变的假设之上。您正在改变现有的数组，而不是创建一个新的数组，因此在设置状态后，React 会比较之前和之后的状态，发现它们是相同的数组，因此认为没有任何变化。因此它不会重新渲染。
相反，创建数组的副本并对其进行修改：
const handleArrayChanges = ({ target: { name, value } }) => { let newArray = [...localArray]; // <--- creating a shallow copy newArray[Number(name)] = value; setLocalArray(newArray); };