更改子组件状态变量（数组），父组件数组更新？答案

【问题标题】：changing a child component state variable(array), Parent component array updates?更改子组件状态变量（数组），父组件数组更新？
【发布时间】：2021-06-30 12:10:21
【问题描述】：

我将字典数组传递给子组件，在子组件中我将道具分配给状态变量，当我更新子组件的状态时，它会更新作为父组件中道具传递的相同数组。

我尝试在添加级别（表格行）时更新表格

  //parent component
    useEffect (()=>{
        console.log("add_level page  and N_table is :" , N_table)
        setreshow(<Table MAA={N_table}   />)
    },[add_level])

在子组件中，当我更新行内容时它也会更新父数组！！

  // child component
       const arr = props.MAA;
       arr.sort((a,b)=> (a.key > b.key ? 1 : -1))   
       const [NN_table , setNN_table] = useState(arr) 
         
      const Changehandler =(e , x) =>{
          NN_table[x].dose = e.target.value      
          setNN_table({...NN_table })   
      }

感谢您的宝贵时间！！

【问题讨论】：

标签： reactjs state use-effect

【解决方案1】：

发生这种情况是因为您将数组作为参考传递。当您说 MA={N_table} 时，将对父表的引用传递给子组件。同样，当您在子组件中使用 useState 设置状态时，您正在传递对 N_table 的引用（它作为道具传递给子组件）。因此，当您更新子组件中的表时，由于存储的表是对父表的引用，因此也会更新。为防止这种情况，当您想按值而不是引用传递数组时，请使用扩展运算符。

修复代码的一种方法如下：

// child component
       const arr = props.MAA;
       arr.sort((a,b)=> (a.key > b.key ? 1 : -1))   
       const [NN_table , setNN_table] = useState([...arr]) 
         
      const Changehandler =(e , x) =>{
          const dummyTable = [...NN_table];
          dummyTable[x].dose = e.target.value;
          setNN_table({dummytable });
      }

【讨论】：