javascript - 更改子组件中的数据而不更改父组件中的数据

Question

我正在更改一组数据，并且数据保存在父组件状态中，我将该数据传递给第二个组件，但是当我更改第二个组件中的数据时，它正在更改第一个组件中的数据。我尝试将变量设置为状态的值，以努力复制它/还在第二个组件中创建一个新状态，该状态是根据第一个组件的初始数据设置的。但由于某种原因我仍在更改初始数据。谁能解释一下这是怎么回事？

父组件:

const [data, setData] = useState([]);
const [editing, setEditing] = useState(null);

{!!editing && (
        <EditInsurance state={editing} data={data} setEditing={setEditing} />
)}

第二个组件:

const [update, setUpdate] = useState([]);
const [List, setList] = useState([]);

//sets the data onLoad
 useEffect(() => {
    setList(data);
  }, []);

//edits the data
const handleClick = (item) => {
    let list = List;
    
    list.forEach((el) => {
      if (el.payerName === item.payerName) {
        el.state.push(state.value);
        if (!el.isActive) {
          el.isActive = true;
        }
      }
    });

    //update is an array containing only edited objects.
    setUpdate([...update, item]);
  };

当 handleClick 被触发并且我控制台父组件中的 data 值时，它已被更新。在用户单击“保存”之前我不想更改该数据。如何获得第二个组件独有的数据副本，而不会操作父组件中的数据？

Answer 1

问题

这里的问题是代码正在改变状态对象。

const [update, setUpdate] = useState([]);
const [List, setList] = useState([]);

// sets the data onLoad
useEffect(() => {
  setList(data); // <-- (1) parent state passed as prop
}, []);

// edits the data
const handleClick = (item) => {
  let list = List; // <--(2) reference to state in parent

  list.forEach((el) => {
    if (el.payerName === item.payerName) {
      el.state.push(state.value); // <-- (3) mutation of parent state!
      if (!el.isActive) {
        el.isActive = true; // <-- (3) mutation of parent state!
      }
    }
  });

  // update is an array containing only edited objects.
  setUpdate([...update, item]);
};

解决方案

使用/应用不可变更新模式。任何正在更新的状态都应该浅复制到新的数组/对象引用中。扩展语法是通过引用进行浅复制，这就是为什么需要创建新数组/对象引用以避免改变原始引用。

我假设这个子组件只想/需要维护自己的 data 属性副本。

const [list, setList] = useState(data); // <-- (1) parent state passed as prop

// edits the data
const handleClick = (item) => {
  setList(list => list.map(el => { // <-- (2) array.map shallow copy
    if (el.payerName === item.payerName) {
      return {
        ...el, // <-- (3) shallow copy array element
        state: [...el.state, state.value], // <-- (4) shallow copy array
        isActive: !el.isActive, // <-- new property
      };
    }
    return el; // <-- not updating, just return current element
  }));
};