javascript - ReactJS - 在更新表单中预填充动态字段

Question

我目前正在处理 ReactJS 的更新表单（提交请求）。我将表单数据存储为 this.state 我想用来预填充，但是，我不确定如何将它实现到动态字段中，因为我希望预填充的数据仍然保留到“删除”功能从表单中删除该行字段。另外，我希望在呈现表单时自动呈现行。这意味着，如果动态字段有两行，则必须在不按“添加”按钮的情况下显示这两行。下面是代码片段和表单的屏幕截图。

<Form.List name={addon.model} key={addon.model}>
    {(fields, { add, remove }) => {
        return (
            <div>
                {fields.map((field, index) => (
                    <Row key={field.key}>
                         {addon.fields.map((a) => (
                              <Col key={'c' + a.key}>
                                  <Input placeholder={a.label} name={a.key} key={'i' + a.key} 
                                   onChange={(e) => this.onChangeAddOn(e, index, addon.model)} />
                               </Col>
                          ))}
                          <Col flex="none">
                               <MinusCircleOutlined
                                className="dynamic-delete-button"
                                onClick={() => {
                                    remove(field.name);
                                    }}
                                />
                          </Col>
                      </Row>
                   ))
                   }
                   <Button
                      type="dashed"
                      onClick={() => {
                           add();
                      }}
                      style={{ width: "100%" }}
                   >
                      <PlusOutlined /> Add POCs
                   </Button>
                   </div>
                );
           }}
</Form.List>

屏幕截图（“-”按钮是删除按钮，如果我按下“添加 POC”按钮，我可以自由添加更多字段，但要点是两行数据必须在开始时与form => 存储在 this.state 中的数据）

感谢并欢迎所有帮助，请帮我指出正确的方向，因为我还是 ReactJS 的新手！我确实查看了渲染道具和 Form.List，但我仍然不确定如何实现它。

标签： javascriptreactjsantd