reactjs - 如何清除来自 redux 操作的错误消息

Question

我有一个 API，它可能会返回错误。在简单的形式中，该组件如下所示。问题是，当发生错误时，如何消除/清除错误消息？

class LoginError extends Component {
    render() {
        return (
            {
                this.props.error != null ?
                    <h2>this.props.error</h2> :
                    undefined
            }
        )
    }
}

const mapStateToProps = (state) => {
    return {
        error: state.error
    };
}


export default connect(mapStateToProps, null)(LoginError);

Answer 1

没有直接的方法可以做到这一点，您基本上有两个选择:当另一个操作触发时，在 reducer 中将错误设置为未定义，或者使用可重用的错误组件在错误本身上提供一个关闭按钮，该组件会调度一个将在 reducer 中将错误设置为未定义的操作。

我个人一直使用第一种方法，以表单的提交为例。当用户提交表单时，您会触发 form-submit/request 并可能显示一条加载消息。如果表单发送正确，您将触发 form-submit；如果发生错误，您将触发 form-submit/error，并在 reducer 中设置错误。然后在 form-submit/request 中清除错误，因此如果发生错误，用户会收到反馈，但如果再次提交表单，错误就会被清除。如果您不想在提交表单时执行任何操作(这很奇怪)，您可以在触发 form-submit 时清除错误。这种方法的缺点是，例如，如果您想在表单的任何字段更改时清除错误，则必须添加另一个操作并使该操作的错误也未定义。

现在，如果您在错误组件中放置一个关闭按钮，您可以重用错误 React 组件，但您必须为每个 API 调用设置一个 action/dismiss-error 操作，并设置对于它们中的每一个，都会在 reducer 上出现未定义的错误，这很快就会变得非常乏味。

对我来说最好的方法是使用第一种方法，但要仔细选择为每个页面或部分显示的错误数量。这样，每个页面都可以有其错误部分，该部分将针对与该页面关联的任何 API 调用显示，并且您只需要为每个页面执行错误操作，而不是为每个 API 调用执行错误操作。