时间戳

首页 > 解决方案 > 更改子组件状态变量（数组），父组件数组更新？

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

问题描述

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

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

  //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 })   
      }

谢谢你的时间！！

标签： reactjsstateuse-effect

解决方案

发生这种情况是因为您将数组作为参考传递。当您说 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 });
      }

推荐阅读