如何解决当我在组件中设置状态时,道具会发生变化
我的 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>
);
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。