0

这是我的项目的外观：

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

4

1 回答 1

0

欢迎来到SO。

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

有两种方法可以处理这个：

  1. 在表单上显示加载符号并等待异步调用完成并填写初始化值 [UX 推荐] 请参见此处
  2. 在获取 initValues 之前显示一个带有默认值的空表单，并在调用完成时显示它们。[糟糕的用户体验实践]
于 2018-09-12T14:22:14.590 回答