Question

这是我的项目的外观：

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 =（）..，无父级

Answer 1

欢迎来到SO。

所以发生了什么事，因为它是异步调用，所以initValues不会立即显示在表单中。即使在控制台日志中，调用完成后也会显示出来。因此，在用空白表格加载页面与随后完成值的init调用之间存在时间间隔。

有两种方法可以解决此问题：

在表单上显示加载符号，并等待异步调用完成并填充init值[推荐使用UX，请参见here
显示具有默认值的空表格，直到获取initValues为止，并在调用完成时显示它们。 [不良的UX习惯]

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

1 个答案: