当我在组件中设置状态时，道具会发生变化

问题描述

我的 nextJs 应用程序出现问题。

我实际上有一个页面，其中我的编辑值初始化为 false 并呈现组件信息，

const [edit,setEdit] = useState(false);

  function getEditStatus() {
    if (!edit) {
      return <MaterialInfo edit={edit} setEdit={setEdit} material={material} />;
    } else {
      return <EditMaterial edit={edit} setEdit={setEdit} material={material} />;
    }
  }
  return <div> {getEditStatus()} </div>;

当我按下编辑按钮时，我的状态变为真并呈现编辑组件。我在 props 中提供我的数据，并在我的编辑组件中用我的数据初始化一个状态。

现在，在我的编辑组件中，我输入了我的信息，我可以更改信息。

const [properties,setProperties] = useState(material.properties);
  const [fournisseur,setFournisseur] = useState(material.fournisseur);

  function changeCharacteristique(nom,e) {
    const allProperties = [...properties];
    const index = allProperties.findindex((item) => item.id_nom.nom === nom);

    allProperties[index].id_nom.nom = e;
    setProperties(allProperties);
  }

  const listProperties = material.properties.map((item,index) => {
    return (
      <tr key={index}>
        <td>
          <input
            type="text"
            onChange={(e) =>
              changeCharacteristique(item.id_nom.nom,e.target.value)
            }
            value={item.id_nom.nom}
          />
        </td>
        <td>{item.valeur}</td>
        <td>{item.unite}</td>
      </tr>
    );
  });

我的问题是当我确认编辑时，我进入了我的信息组件，但在我的数据中保留了我对数组的更改，而不是我的文本。对我来说，信息组件不应该保留我的编辑数据，因为我只是在我的组件中设置了状态并且我从不更改我的初始数据。

如果我想做一个取消按钮，这是有问题的，因为我的数据无论如何都在改变。

取消编辑

保留数据

我做了一个小沙盒来展示我的问题

您可以在这里看到问题，https://codesandbox.io/s/quizzical-herschel-6dn0i?file=/components/EditMaterial.js

解决方法

虽然我无法解释为什么您的更新方法不起作用。

我已将您的功能更改为我通常使用的方式，现在它应该可以工作了。

  const changeCharacteristique = (nom,e) => {
    // const allProperties = [...properties];
    // const index = allProperties.findIndex((item) => item.id_nom.nom === nom);

    // allProperties[index].id_nom.nom = e;
    setProperties(
      properties.map((item) =>
        item.id_nom.nom === nom ? { ...item,id_nom: { nom: e } } : item
      )
    );
  };

  //should be properties.map not material.properties.map
  const listProperties = properties.map((item,index) => {
    return (
      <tr key={index}>
        <td>
          <input
            type="text"
            onChange={(e) =>
              changeCharacteristique(item.id_nom.nom,e.target.value)
            }
            value={item.id_nom.nom}
          />
        </td>
        <td>{item.valeur}</td>
        <td>{item.unite}</td>
      </tr>
    );
  });