为什么这个状态要等到另一个状态更新或快速刷新后才会更新？ - 反应/NextJS

Question

编辑：下一个版本是 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

正如您所看到的，在数组状态更新后，第一个元素应该显示在段落上，但直到解释了顺式情况才显示

Answer 1

React 建立在状态不可变的假设之上。您正在改变现有的数组，而不是创建一个新的数组，因此在设置状态后，React 会比较之前和之后的状态，发现它们是相同的数组，因此认为没有任何变化。因此它不会重新渲染。

相反，创建数组的副本并对其进行修改：

const handleArrayChanges = ({ target: { name, value } }) => {
  let newArray = [...localArray]; // <--- creating a shallow copy
  newArray[Number(name)] = value;
  setLocalArray(newArray);
};