編輯:下一個(gè)版本是 13.3.0
我有一個(gè)名為 localArray
的狀態(tài),我只想更新到特定索引,因此我想到創(chuàng)建一個(gè)時(shí)間變量來(lái)修改該數(shù)組并使用時(shí)間值更新?tīng)顟B(tài),問(wèn)題是,這個(gè)狀態(tài)直到另一個(gè)狀態(tài)更新或快速刷新后才會(huì)更新,我不知道為什么會(huì)發(fā)生這種情況
這是一個(gè)最小的可重現(xiàn)示例:
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
正如您所看到的,在數(shù)組狀態(tài)更新后,第一個(gè)元素應(yīng)該顯示在段落上,但直到解釋了順式情況才顯示
React 建立在狀態(tài)不可變的假設(shè)之上。您正在改變現(xiàn)有的數(shù)組,而不是創(chuàng)建一個(gè)新的數(shù)組,因此在設(shè)置狀態(tài)后,React 會(huì)比較之前和之后的狀態(tài),發(fā)現(xiàn)它們是相同的數(shù)組,因此認(rèn)為沒(méi)有任何變化。因此它不會(huì)重新渲染。
相反,創(chuàng)建數(shù)組的副本并對(duì)其進(jìn)行修改:
const handleArrayChanges = ({ target: { name, value } }) => { let newArray = [...localArray]; // <--- creating a shallow copy newArray[Number(name)] = value; setLocalArray(newArray); };