反应动态状态更新答案

【问题标题】：React dynamic state update反应动态状态更新
【发布时间】：2022-01-23 06:34:03
【问题描述】：

我有一个动态的状态。但是当我更新它时，它总是会覆盖它，所以它不会添加新的键和值。例如：

const [DynamicForm, setDynamicForm] = useState({});


 <Input placeholder={element.Name}
          onChange={(e) => {
          updateDynamicForm(e.target.value, field.Id);
          }}
          />

const updateDynamicForm = (value, Id) => {
      setDynamicForm({ ...DynamicForm, [Id]: value });
      form.setFieldsValue({ [Id]: value });
    
  };

我使用了 3-4 次动态输入。

这就是我想要的 =>

{15:"Input 1 Text example", 16:"Input 2 Text example"} //15 and 16 is Id that i give it on change event.

这就是我得到的 =>

{15:"Input 1 Text example"}  //After i edit input 2 that object becomes => {16:"Input 2 Text Example"}

我的代码有什么问题我真的很困惑。谢谢回复！

【问题讨论】：

什么是form.setFieldsValue？
@JamesAnderbard 抱歉，我忘了提及它。它来自蚂蚁设计的表单组件。它用于填写表单中的字段。
DynamicForm 更新前的输出是什么？试试 console.log 吧

标签： javascript reactjs react-native

【解决方案1】：

好的，我有使用 antdesign 表单的经验，总的来说，你做错了（并非总是如此，但很可能）。表单状态不应该在表单之外，它应该包含在表单中。一旦您开始将表单状态外部化，您就会遇到在各种情况下试图使您的外部状态与您的实际表单状态保持同步的问题。

为了让组件对表单状态的变化做出反应，请使用：

<Form.Item dependencies={[...names of fields}]>
 {(getFieldValue) => {
     return /* any jsx you want */
 }}
</Form.Item>

您的表单应包含在 Form 组件中，并且您的每个 Inputs/Selects/Radios/whatever 都应包含在 Form.Item 中

【讨论】：