Question

我试图通过HTTP get请求从我的服务器发出值来初始化我的表单。

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

我使用redux格式，我发现（here）可以使用initialize redux form函数来完成它。实际上，当我在initData对象中对值进行硬编码但是在从http请求中检索数据时它不起作用，因为它似乎在创建initData对象后执行get ..

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

“USER =＆gt; Object {}” 未捕获的TypeError：无法读取未定义的属性'toString' 对象{ID：1，FIRSTNAME：“Roger”等...} 罗杰

这意味着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();
  }

有什么想法吗？

非常感谢你的帮助，对不起，如果我的问题显而易见，我是初学者：）

Answer 1

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

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

使用redux form initialize函数和GET请求初始化表单值

1 个答案: