为什么这个状态直到另一个状态更新或快速刷新后才更新?- React / NextJS

eulz3vhy  于 2023-06-29  发布在  React
关注(0)|答案(1)|浏览(125)

编辑:下一版本为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

正如您所看到的,在数组状态更新后,第一个元素应该会显示在段落中,但直到解释了ciscumstances之后才显示

ilmyapht

ilmyapht1#

React建立在状态是不可变的假设之上。你是在改变现有的数组,而不是创建一个新的数组,所以在你设置了状态之后,react会比较之前和之后的状态,看到它们是同一个数组,因此认为没有任何变化。因此,它不会返回。
相反,创建数组的副本并修改它:

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

相关问题