javascript - 我如何处理 React JS 中的状态错误？

Question

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

一个例子是授权——如果用户不能查看一个项目，他们会得到一个未经授权的错误。

在我的商店中，我为状态设置了一个 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

错误代码不应出现在组件状态中。因为(显然)它与组件状态不完全对应。据我所知，您正在寻找的是以下状态:

• 错误代码=not null:显示错误组件
• 错误代码重置为空:错误组件仍然显示(因为您不想重新渲染组件)

所以我建议从状态中删除错误并执行类似的操作:

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

clearErrors() {
  errorcode = null;
}