為什麼這個狀態要等到另一個狀態更新或快速刷新後才會更新？ - 反應/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);
};