如何在React JS中处理状态错误？

Question

在我的商店中，我设置了处理API调用错误的函数。

一个例子是授权 - 如果用户无法查看project ，他们会收到未经授权的错误。

在我的商店中，我在状态上设置了一个error属性。

然后，在我的组件的渲染函数中，我首先检查this.state.error 。 这很好 - 我渲染一个包含错误消息和代码的重用错误组件。

问题是我需要在用户移动后将错误状态重置为null - 但重置状态会导致组件重新呈现。

我目前的方法（在我的组件的渲染功能中）：

if (this.state.error) {
        return (
            <Error 
                errorTitle={this.state.errorCode} 
                errorMessage={this.state.error}
                clearErrors={this.clearErrors}
            />
        )
    }

和属于同一个类的函数：

clearErrors: function () {
    this.setState({
        error: null,
        errorCode: null
    });
},

然后我的错误组件：

var Error = React.createClass({

    clearErrors: function () {
        this.props.clearErrors();
    },

    render: function () {
        return (
            <Panel className='errorPanel' header={this.props.errorTitle} bsStyle='danger'>
                <p>{this.props.errorMessage}</p>
                <a href='#/dashboard'>
                    <Button onClick={this.clearErrors}>Return to Dashboard</Button>
                </a>
            </Panel>
        )
    }
});

问题很明显 - 在onClick实际上将我的用户返回到仪表板之前，它会非常快速地呈现用户不应该看到的组件。

我应该怎么处理这个？

Answer 1

错误代码不应处于组件状态。 因为（显然）它与组件状态不完全对应。 从我收集的你正在寻找的是以下状态：

• 错误代码=非null：显示错误组件
• 错误代码重置为null：仍然显示错误组件（因为您不想重新呈现组件）

所以我建议从状态中删除错误并执行以下操作：

render() {
  errorcode = this.props.errorcode;
  if (this.props.errorcode) {
    return <ErrorComponent...>
  }

clearErrors() {
  errorcode = null;
}