ReactJs redux 表单：传递给表单的初始值不显示

Posted 2023-02-22

【中文标题】ReactJs redux 表单：传递给表单的初始值不显示

【英文标题】：ReactJs redux form: initial values passed down to form not displaying

【发布时间】：2019-02-17 03:33:41

【问题描述】：

这就是我的项目的样子：

class ParentOfForm extends Component
  constructor()this.state=initVals: null;
  componentDidMount()
    asyncCall.then((values) =>
      setState(
        initVals: 
          initval1: valFromAsync,
          ..
        
      )
    );
  
  render()
    const initVals = this.state;
    !initVals && <Form/>
    !!initVals && <Form initialValues=initVals/>
  


----------------

class Form extends Component
  constructor(props)
    super(props);
    this.state = 
      initval1: "",
      ..
    
  

  render()
    return(
      <form..>
        ..
      </form>
    );
  


Form = reduxForm(
  form: "Form",
  validate,
  enableReinitialize: true
)(Form);

export default Form;

如您所见，我正在尝试使用来自异步函数的值作为 initialValues 来初始化表单的输入字段。当我在 Form = reduxForm(...) 中定义 initialValues 时，它们会正确显示。但是，当我尝试使用异步调用动态设置它们时，我可以看到值正在更改，但它们似乎都未定义，尽管我可以看到它们被 console.log() 填充。做错了什么？

我不能使用明显的替代方法，原因是：defaultValue, const Form = ().., no parent

【问题讨论】：

我不确定您是否打算显示一些伪代码，但 asyncCall.then(setState(...)) 部分似乎不正确。你的意思是asyncCall.then((values) => setState(...)) 吗？还有initVals=null应该是initVals: null

另外你正在检查!initValues && <Form/>，但似乎你的意思是initVals而不是initValues一个干净的JS代码会更好地解决这个问题

【参考方案1】：

欢迎来到 SO。

所以发生的事情是因为它是一个异步调用，所以 initValues 不会立即显示在表单中。即使在控制台日志中，它也会在调用完成后显示。因此，在使用空白表单加载页面与使用值完成初始化调用之间存在时间间隔。

有两种处理方法：

在表单上显示加载符号并等待异步调用完成并填写初始化值 [UX 推荐] 请参阅 here 在获取 initValues 之前显示一个带有默认值的空表单，并在调用完成时显示它们。 [糟糕的用户体验实践]