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中将错误设置为undefined，或者使用可重用的错误组件在错误本身上提供关闭按钮，调度在reducer中将错误设置为undefined的操作。

我个人总是使用第一种方法，让我们以提交表格为例。当用户提交表单时，您可以触发form-submit/request并显示加载消息。如果表单发送正确，则触发form-submit，如果发生错误，则触发form-submit/error，在减速器中设置错误。然后在form-submit/request中清除错误，以便用户在发生错误时获得反馈，但如果再次提交表单，则会清除错误。如果您在提交表单时不想做任何事情，这很奇怪，您可以在form-submit被触发时清除错误。这种方法的缺点是，如果您希望在更改表单的任何字段时清除错误，则您必须添加另一个操作并为该操作定义错误。

现在，如果您在错误组件中放置一个关闭按钮，则可以重用错误React组件，但是您必须对每个API调用执行action/dismiss-error操作，并将错误设置为未定义对于每一个减速器，这可能会很快变得非常乏味。

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

Answer 2

Quote from docs:

商店保存您的应用程序的整个状态树。唯一的办法改变其中的状态就是对其发出一个动作。

就是这样。如果你保留一些处于redux状态的东西，那么为了改变它的值，你必须发出一个动作。

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

2 个答案: