反应动态更新

Question

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

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"}

我的密码出了什么问题我真的很困惑。谢谢你的回复！

Answer 1

好的，我有反设计表单的经验，一般来说，你做错了(并不总是，但很有可能)。表单状态不应该是表单的外部，它应该包含在表单中。一旦开始对表单状态进行外部化，就会遇到一些问题，试图在各种情况下使外部状态与实际窗体状态保持同步。

为了让组件对表单状态的更改作出反应，请使用：

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

您的表单应该包装在一个Form组件中，每个输入/选择/收音机/任何东西都应该包装在一个Form.Item中