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

How can I handle errors in state in React JS?

本文关键字：处理 状态 错误 JS React      更新时间：2023-09-26

在我的store中，我设置了一些函数来处理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
    });
},

然后是Error组件

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实际将用户返回到仪表板之前，它很快呈现了用户不应该能够看到的组件。

我应该如何处理这个?

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

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

所以我建议从状态中删除错误，并做一些类似的事情:

render() {
  errorcode = this.props.errorcode;
  if (this.props.errorcode) {
    return <ErrorComponent...>
  }
clearErrors() {
  errorcode = null;
}
相关文章：