Question

我将一个字典数组传递给子组件，在子组件中我将 props 分配给一个状态变量，当我更新子组件的状态时，它会更新与父组件中的 props 相同的数组。

>

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

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

感谢您的时间！

Answer 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 });
      }

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

1 个答案: