问题：为什么在我为孩子设置状态时，React为什么更新我的父母？仅发生在数组

Posted 2021-04-13

我有一个将事件详细信息传递到事件列表，并将其传递给表单进行编辑的应用程序。

此表单正在使用受控元素，因此在onChange事件发生后，所有内容都会更新为状态。

由于某种原因，当我将状态设置回表单时，一切都很好（TextField，Switch）。

但是，当我尝试使用Array元素时，设置数组元素的状态将把props.event_detail一直更新到原始组件。

例如

编辑之前的事件列表。单击编辑，将显示EditEvents：

对摘要和数组事件会话进行更改，然后单击关闭

摘要未更新，但事件会话数组为

代码沙盒https://codesandbox.io/s/nice-franklin-pslvz?fontsize=14&hidenavigation=1&theme=dark

测试页https://pslvz.csb.app/?page=admin

答案

我找到了罪魁祸首，这是由于此代码。4

为了说明而简化。

const formData, setFormData = React.useState(props.event_detail);

let array_value = formData[name];
array_value[index] = { ...array_value[index], [param]: value };
value = array_value;
setFormData({...formData, [name]=value}); 

通过更改解决

let array_value = Array.from(formData[name);

虽然可能是个错误，但它明确表示不允许在没有回电的情况下更新孩子的道具。