Question

我正在使用react-final-form-arrays构建动态现场系统，到目前为止，情况是这样的：

用户单击按钮以打开编辑器模式（使用react-final-form-array添加/删除自定义字段。完成后，单击“保存”，它将更新主表单。

主要表单也使用react-final-form-array来遍历字段并呈现，而未添加“添加/删除”按钮。

我尝试从此处放置一个非常简单的示例：https://codesandbox.io/s/react-final-form-field-arrays-wbhgq?fontsize=14

在该示例中，<Form1 />实际上是编辑器表单。提交后，<Form2 />将使用新字段进行渲染。

如果我重新加载页面，它可以工作，但是当然这不是应该的。

要进行我的<Form2 />更新，我应该更改什么？

预先感谢

Answer 1

我不确定我是否理解正确，但是主要思想是使用useState或类组件的状态为initialValues创建存储

  const App = () => {
    const [initialValues, setInitialValues] = useState();

    return (
      <Styles>
        <Form1 onSubmit={setInitialValues} />
        <Form2 initialValues={initialValues} />
      </Styles>
    );
};

如果这不是您想要实现的，请详细解释

React-final-form-array如何基于新状态重新呈现表单

1 个答案: