更改儿童组件中的数据而不在父母中更改它

Question

我正在更改一组数据，并且数据保存在父组件状态下，我将数据传递给第二个组件，但是当我对第二组件中的数据进行更改时，它将在第一个更改数据。 IVE试图为状态的值设置一个变量，以制作IT /还会在第二个组件中创建新状态，该状态是从第一个数据从初始数据设置的。但是由于某种原因，我仍在更改初始数据。谁能解释这里发生了什么？

父组件：

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

解决方案

使用/应用不变的更新Patten。任何正在更新的状态都应将其浅入新数组/对象参考。扩展语法是通过引用的浅副本，这就是为什么创建 new array/object参考对于避免突变原始的原因。

我假设这个子组件只需要/需要维护自己的数据 prop的副本。

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

Answer 2

您可以尝试使用传播操作员复制列表。在子组件上，您可以执行类似的操作：

function EditInsurance(props) {
  const [parentData, setParentData] = useState([...props.data]);
  ...
}

然后在子组件上使用parentdata，甚至不需要使用效果。

Answer 3

您需要深层克隆才能保存

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

useEffect(() => {
  const cloned = data.map(item => {...item})   // clone list and items
  setList(cloned);
}, []);

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

 setUpdate([...update, item]);
}

handleclick（）的单个对象，可能会缩短到

const handleClick = (item) => {
  const payer = list.find(el => el.payerName === item.payerName);
  payer.state.push(state.value);
  payer.isActive = true;

 setUpdate([...update, item]);
}

Answer 4

我不是很确定，但是您可以尝试类似的东西 -

const [List, setList] = useState([]);
const [newList, setNewList] = useState([]);

随着 -

 useEffect(() => {
    setList(data);
  }, []);

使用 -

 useEffect(() => {
    setNewList([...List])
  }, [List]);

这将使您收到的列表道具的克隆副本，现在如果您更改此列表（推送或setstate），则您的父部件将不会反映变化。

现在，在您的Handleclick函数中 - -

    const handleClick = (item) => {
        let MyList = [...newList]

        # this is brcause you are using map. So first push the data in MyList and then setState your newList, so that child component can re-render 
        
        MyList.forEach((el) => {
          if (el.payerName === item.payerName) {
            el.state.push(state.value);
            if (!el.isActive) {
              el.isActive = true;
            }
          }
        });

     # also include this
     setNewList(MyList) 

    setUpdate([...update, item]);

}

在您的子组件渲染方法中使用新清单。

Answer 5

只需摆脱对props.data的

function EditInsurance(props) {
  const [parentData, setParentData] = useState([JSON.parse(JSON.stringify(props.data))]);
  ...
}

                         OR

参考

function EditInsurance(props) {
  const [parentData, setParentData] = useState([._cloneDeep(props.data))]);
  ...
}

Answer 6

因此，问题是为什么从子女组件中更改数据的数据？的数据，JS中的对象是参考，
当您执行这样的事情时，

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

父母的列表和父母的数据是指内存中的同一对象，更改列表中的某些内容将直接反映到数据。好练习。现在，您可以通过在儿童组件中创建新的数据副本来使工作是工作的，

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

但是随着传播操作员的内在数据，将与儿童组件共享，因此更好的方法是使用JSON.STRINGIFY和JSON.PARSE进行深层副本

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

。孩子和父母组件都将拥有自己的数据副本，而儿童的更改将不会反映到父母的成分，希望这对您有所帮助。

Answer 7

查看其他答案，并且看到您还没有找到解决方案，您是否尝试过克隆data在将其传递给Prop之前？

父组件：

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

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