reactjs - ReactJS从服务器接收表单错误

Question

下面是我在React中的注册功能。如何呈现后端收到的错误？我试图将this.setResponse放入catch部分...这没用。我了解componentWillReceiveProps应该处理更新，但这是来自Service(也是下面)而不是父组件的更新。

如果我打印出错误，我会看到一个带有错误的字典，但是我看不到如何将它们传递给表单或字段进行渲染。

signup(evt) {
    evt.preventDefault();
    ...
      Auth.signup(dict)
        .catch(function(err) {
            alert("There's an error signing up");
            console.log(err.response);
      });
},

Auth服务的定义如下:

signup(dict) {
    console.log(dict);
    return this.handleAuth(when(request({
        url: UserConstants.SIGNUP_URL,
        method: 'POST',
        type: 'json',
        data: dict
    })));
}

我希望通过以下方式将错误发送到字段:

<UserNameField
    ref="username"
    responseErrors={this.responseErrors}
/>

Answer 1

假设UserNameField与auth回调位于同一组件中，则只需设置状态即可触发重新渲染并通过UserNameField传递值作为 Prop 。

signup(evt) {
    evt.preventDefault();
    ...
      Auth.signup(dict)
        .catch((err) => {
            alert("There's an error signing up");
            console.log(err.response);
            this.setState({error: err});
      });
},

<UserNameField
    ref="username"
    responseErrors={this.responseErrors}
    error={this.state.error}
/>

这与.bind(this)相同。