时间戳

首页 > 解决方案 > React-final-form-array 如何根据新状态重新渲染表单

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

问题描述

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

提前致谢

标签： javascriptreactjsdynamicreact-final-form

解决方案

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

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

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

如果不是您想要实现的，请详细说明

推荐阅读