在 react redux 中的异步操作后出现错误

Question

我正在尝试使用 redux 表单注册用户。所有同步验证都在工作，但是当用户提交表单并且电子邮件已经注册时，问题就出现了。返回一个错误，我可以按如下方式访问该错误

export function registerUser(details, callback) {
return(dispatch) =>{
    dispatch(startRegisteing());
    axios.post(URL, {
        "email": details['email'],
        "name": details['username'],
        "password": details['password']
    }).then((data) =>{
        callback();
        dispatch(RegistrationSuccessfull(data))
    }).catch((error) => {
        console.log('error', error.response.data.message);
        //throw new SubmissionError(error.response.data.message);
        dispatch(RegistrationFailed(error.response.data.message))
    })
}
}

RegistrationFailed 操作

export function RegistrationFailed(error) {
return{
    type: types.REGISTRATION_ERROR,
    payload:error
}
}

它的 reducer 只是更新状态

switch (action.type){
    case types.REGISTRATION_SUCCESSFUL:
    console.log("nanana too ", action);
    return{
        ...state, isRegisteringUser:false,
        data:action.data
    };
    case types.REGISTRATION_ERROR:
    console.log("current state", state);
    return{
        ...state, error: action.payload
    }
}

我的问题是我怎样才能在表单中将此错误呈现给用户

<form onSubmit={handleSubmit(this.onFormSubmit.bind(this))}>
                        <Field
                            name="username"
                            lable="Username"
                            type="text"
                            component={ this.renderField }
                        />
                        <Field
                            name="email"
                            type="email"
                            lable="Email"
                            component={ this.renderField }
                        />
                        {// I want to present the error here }
                        {error  && <strong>{error}</strong>}
                        <Field
                            name="password"
                            type="password"
                            lable="Password"
                            component={ this.renderField }
                        />
                        <Field
                            name="confirm_password"
                            type="password"
                            lable="Confirm Password"
                            component={ this.renderField }
                        />
                        <button type="submit" className="btn btn-primary" disabled={submitting}>Register</button>
                        <Link className="btn btn-danger" to="/login">Cancel</Link>

                    </form>

我已经尝试过 throw new SubmissionError(error.response.data.message);，正如 react-form 文档所说，但它引发了 Unhandled rejection SubmissionError: Submit Validation Failed 的错误 注意： 我是 react-redux 的初学者。任何帮助将不胜感激

Answer 1

由于您将错误存储在 redux 存储中状态的 error 字段中，因此您可以使用 mapStateToProps 在表单中订阅此字段，并在该字段不为空时显示消息。

...
import ...
...

class YourComponent extends React.Component{

       render(){
             return(
                     <form onSubmit={handleSubmit(this.onFormSubmit.bind(this))}>
                        <Field
                            name="username"
                            lable="Username"
                            type="text"
                            component={ this.renderField }
                        />
                        <Field
                            name="email"
                            type="email"
                            lable="Email"
                            component={ this.renderField }
                        />

                        {this.state.yourReducer.error  && <strong>{this.state.yourReducer.error}</strong>}
                        <Field
                            name="password"
                            type="password"
                            lable="Password"
                            component={ this.renderField }
                        />
                        <Field
                            name="confirm_password"
                            type="password"
                            lable="Confirm Password"
                            component={ this.renderField }
                        />
                        <button type="submit" className="btn btn-primary" disabled={submitting}>Register</button>
                        <Link className="btn btn-danger" to="/login">Cancel</Link>

                    </form>
                  );
             }

}

const mapStateToProps=(state) =>{
   "yourReducer": state.yourReducer
}

export default connect(mapStateToProps)(YourComponent);

Answer 2

你可以使用 mapStateToProps 将你的 store 绑定到组件内的 props，然后你就可以直接在你的 store 上使用 this.props 并显示错误。