ReactJS 从服务器接收表单错误

Question

下面是我在 React 中的注册功能。如何渲染从后端收到的错误？我试图将 this.setResponse 放入 catch 部分……但没有用。我知道 componentWillReceiveProps 应该处理更新，但这是来自服务（也在下面）而不是来自父组件的更新。

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

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 与身份验证回调在同一个组件中，您只需设置将触发重新渲染的状态并将值作为道具传递给UserNameField。

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) 相同。