Code A:
const increaseVote = () => {
const copy = points
console.log(copy)
copy[selected] += 1
setPoints(copy)
…………………………
return
}
Code B:
const increaseVote = () => {
const copy = [...points]
console.log(copy)
copy[selected] += 1
setPoints(copy)
…………………………
return
}
前情提要:points是React中的状态变量。状态变量改变时,对应的组件会进行重渲染。然而在使用A段时,setPoints后不会重渲染组件,但B段代码会。
想了一会才看出来,A段相当于直接对points进行操作了,而B段才是成功copy了一个新的数组,然后set。
A即为“直接赋值”,B为“浅拷贝”
A方式的状态变量的“直接改变违反了React 中状态不可直接修改的原则,导致意想不到的副作用”。虽然现在还不懂原理,不过已经体验出来了......
Comments | NOTHING