编辑:下一版本为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之后才显示
1条答案
按热度按时间ilmyapht1#
React建立在状态是不可变的假设之上。你是在改变现有的数组,而不是创建一个新的数组,所以在你设置了状态之后,react会比较之前和之后的状态,看到它们是同一个数组,因此认为没有任何变化。因此,它不会返回。
相反,创建数组的副本并修改它: