編輯：下一個版本是 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); };