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

我正在使用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 />？

提前致谢

最佳答案

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

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

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

如果不是您要实现的目标，请详细解释