使用 redux 表单初始化函数和 GET 请求初始化表单值答案

【问题标题】：Initialize form values with redux form initialize function and a GET request使用 redux 表单初始化函数和 GET 请求初始化表单值
【发布时间】：2017-02-16 23:00:05
【问题描述】：

我正在尝试使用来自我的服务器的值通过 HTTP 获取请求来初始化我的表单。

我的组件有一个 userId 有一个 props（为了测试，我只是将请求中的 id 硬编码为 1），我想从数据库中检索所有相应的值并用它们初始化我的字段。

我使用 redux 表单，我发现 (here) 可以使用初始化 redux 表单功能来完成它。实际上，当我对 initData 对象中的值进行硬编码时它可以工作，但在从 http 请求中检索数据时它不起作用，因为它似乎是在创建 initData 对象后执行 get ..

我不知道我是否清楚，但在我的控制台中它显示了这个：

“用户 => 对象 {}” 未捕获的类型错误：无法读取未定义的属性“toString” 对象 {ID: 1, FIRSTNAME: "Roger" etc...} 罗杰

也就是说get函数可以工作，但是在initData对象初始化之后就可以使用了....

这是我的代码摘录：

class LoginForm extends React.Component {

  handleInitialize () {
    const user = {};
    // TODO: Gérer le cas où il n'y a pas de userId
    fetch('http://localhost:3000/user/1')// + this.props.userId)
      .then((resp) => resp.json())
      .then((data) => {
        console.log(data);
        console.log(data.FIRSTNAME);
        user.FIRSTNAME = data.FIRSTNAME;
        user.LASTNAME = data.LASTNAME;
        user.EMAIL = data.EMAIL;
        user.CITY = data.CITY;
        user.RANKING = data.RANKING;
        user.AVATAR = data.AVATAR;
      })
      .catch((error) => {
        console.log(error);
      });
    console.log('USER => ', user);

    if(user) {
      const initData = {
        'firstname': user.FIRSTNAME.toString(),
        'lastname': user.LASTNAME.toString(),
        'city': user.CITY.toString(),
        'email': user.EMAIL.toString(),
        'ranking': user.RANKING.toString(),
        'avatar': user.AVATAR.toString()
      };
      console.log(initData);
      this.props.initialize(initData);
    }
  }

  componentDidMount () {
    this.handleInitialize();
  }

有什么想法吗？

非常感谢您的帮助，如果我的问题似乎很明显，我很抱歉，我是初学者 :)

【问题讨论】：

因为 Fetch 是异步运行的。这意味着在运行下面的代码之前它不会等待 get 请求完成。如果你在 Promise 内部进行初始化，你会有更好的运气。
就这么简单！非常感谢您的帮助！

标签： javascript forms reactjs redux-form

【解决方案1】：

尝试将this.props.initialize 移动到then(data =>{...}) 块内。如果这不能解决问题，请确保将 enableReinitialize 设置为 true。

reduxForm({
  form: 'formName',
  ...
  enableReinitialize: true,
})(LoginForm);

【讨论】：