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