React/NextJS中状态为何需其他状态更新或快速刷新后才生效？（Next 13.3.0）

问题根源 #

你遇到的问题是因为直接修改了React状态数组的引用。数组属于引用类型，let newArray = localArray并没有创建新数组，只是把原状态数组的引用复制给了newArray。修改newArray的元素时，其实是在修改原状态数组本身。而React检测状态更新依赖引用变化，当你调用setLocalArray(newArray)时，传入的还是原来的数组引用，React会认为状态没有改变，因此不会触发组件重新渲染。只有当其他状态（比如someState）更新时，组件才会重新渲染，此时才会显示修改后的数组内容。

解决方法 #

必须创建原数组的新拷贝，再修改拷贝后的数组，最后用新数组更新状态，这样React就能检测到引用变化并重新渲染组件。以下是几种常用实现方式：

方式1：使用展开运算符（最常用）

const handleArrayChanges = ( { target: { name, value } } ) => {
    // 展开原数组创建新拷贝
    let newArray = [...localArray];
    newArray[Number(name)] = value;
    setLocalArray(newArray);
}

方式2：使用Array.from

const handleArrayChanges = ( { target: { name, value } } ) => {
    let newArray = Array.from(localArray);
    newArray[Number(name)] = value;
    setLocalArray(newArray);
}

方式3：使用slice()方法

const handleArrayChanges = ( { target: { name, value } } ) => {
    // slice()不传参数时会返回原数组的浅拷贝
    let newArray = localArray.slice();
    newArray[Number(name)] = value;
    setLocalArray(newArray);
}

核心原则 #

React状态是不可变的，永远不要直接修改状态值（尤其是引用类型的状态，比如数组、对象），必须通过创建新的引用类型实例来更新状态，这样才能保证React正确检测状态变化并触发组件渲染。

内容的提问来源于stack exchange，提问作者Benevos