React-final-form-array 如何根据新状态重新渲染表单

Question

我正在使用react-final-form-arrays来构建一个动态字段系统，到目前为止，场景是这样的：

1. 用户单击按钮打开编辑器模式(使用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 或 state of class 组件为 initialValues 创建一个存储

const App = () => {
const [initialValues, setInitialValues] = useState();
return (
<Styles>
<Form1 onSubmit={setInitialValues} />
<Form2 initialValues={initialValues} />
</Styles>
);
};

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