IT技术 - 在 reactjs 中以表单形式保存值 - 吾爱随笔录

我有一个应用程序，用户可以在其中使用表单提交数据。我正在使用动态表单，用户可以在其中设置他想要的表单数量。

 <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
      <Form.List name="users">
        {(fields, { add, remove }) => {
          return (
            <div>
              {fields.map((field, index) =>
                !fieldsOnEdit.includes(index) ? (
                  <Space
                    key={field.key}
                    style={{ display: "flex", marginBottom: 8 }}
                    align="start"
                  >
                    <Form.Item
                      {...field}
                      name={[field.name, "first"]}
                      fieldKey={[field.fieldKey, "first"]}
                      rules={[
                        { required: true, message: "Missing first name" }
                      ]}
                    >
                      <Input placeholder="First Name" />
                    </Form.Item>
                    <Form.Item>
                      <Button type="primary" htmlType="submit">
                        Submit{setFieldOnEdit(index)}
                      </Button>
                    </Form.Item>
                  </Space>
                ) : (
                  <Edit value={formVal} keyForm={index} />
                )
              )}

              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => {
                    add();
                  }}
                  block
                >
                  <PlusOutlined /> Add field
                </Button>
              </Form.Item>
            </div>
          );
        }}
      </Form.List>
    </Form>

当我点击提交按钮出现<Edit value={formVal} keyForm={index} />组件时，应该从表单中出现相应的值。现在有一个问题：当我保存例如 2 个表单时，第二个值会覆盖以前的等等。我做了这个：value.users[value.users.length - 1].first，试图为每个表单设置相应的值，但它不起作用。
问题：如何解决这个问题，我什么时候会保存一个表单以在组件中显示相应的值？
演示：https : //codesandbox.io/s/modest-austin-kqztw?file=/ index.js: 698-2310