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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了问题:为什么在我为孩子设置状态时,React为什么更新我的父母?仅发生在数组相关的知识,希望对你有一定的参考价值。

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

此表单正在使用受控元素,因此在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);

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

以上是关于问题:为什么在我为孩子设置状态时,React为什么更新我的父母?仅发生在数组的主要内容,如果未能解决你的问题,请参考以下文章

React Native - 将父母的状态传递给孩子的麻烦

反应:你怎么能设置一个嵌套的孩子的状态

React Native FlexBox:为啥添加`alignItems`会阻止孩子拥有100%的宽度?

React - 警告:列表中的每个孩子都应该有一个唯一的“关键”道具

React:将状态从孩子传递到孩子再传递给父母

React DropdownList - 有状态或无状态的孩子?