reactjs - 为什么设置一个状态会影响另一个状态？

Question

所以我的代码看起来像这样，其中我有两个相同的状态 state1 和 state2。点击“change”按钮会设置state1的状态，但实际上两个状态的值都改变了，通过点击“Show”按钮显示。是什么导致了这个问题？

import React, { useEffect, useState } from "react";

interface Obj {
  num: number
}

const App = () => {

  const [state1, setState1] = useState<Array<Obj> | null>(null)
  const [state2, setState2] = useState<Array<Obj> | null>(null)

  useEffect(() => {
    const a = [{num: 1} as Obj]
    setState1(a)
    setState2(a)
  }, [])

  return (
    <div>
      <button
        onClick={() => {
          if (state1 == null) return null
          const temp = [...state1]
          temp[0].num = 100;
          setState1(temp)
        }}  
      >
        Change
      </button>
      <button 
        onClick={() => {
          console.log(state1, '11');
          console.log(state2, '22');
        }}
      >
        Show
      </button>
    </div>
  )
}

export default App

Answer 1

这是因为 JavaScript 对象是通过引用传递的。由于您的对象:

const a = [{num: 1} as Obj];

被传递给两个状态 setter ，两者本质上都将引用内存中的同一个对象。因此，当您稍后通过设置 obj.num = 100 更新其中一个时，更改将影响两个状态数组，因为它们包含相同的对象。在 temp 变量中使用数组展开语法只会创建一个浅 副本，其中的对象仍然是相同的。为确保不会发生这种情况，您可以在将对象传递给第二个状态 setter 之前对其进行深度克隆。例如:

useEffect(() => {
  const a = [{num: 1} as Obj]
  setState1(a)
  // used map() and destructuring syntax here just to clone
  setState2(a.map((obj) => {
    const clone = {...obj, num: 100 }
    return clone
  })))
}, [])

请注意，对象传播语法也仅创建一个浅拷贝。如果数组中的对象包含对其他对象的引用，您也必须使用相同的方法克隆这些对象。