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

Question

In my stores, I have functions set to handle errors in API calls.

One example is for authorization - if a user cannot view a project , they get an unauthorized error.

In my store, I set an error property on the state.

Then, in my component's render function, I first check for this.state.error . This works fine - I render a reused error component containing the error message and code.

The problem is that I need to reset the error state to null after the user moves on - yet resetting the state causes the component to re-render.

My current approach (in my component's render function):

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

And a function that belongs to the same class:

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

And then my Error component:

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>
        )
    }
});

The problem is evident - before the onClick actually returns my user to the dashboard, it very quickly renders the component that the user is not supposed to be able to see.

How should I be handling this?

Answer 1

The errorcode should not in the components state. Because (apparently) it does not correspond fully with the components state. From what I gather you are looking for is the following states:

• Error code = not null: error component displayed
• Error code reset to null: error component still displayed (because you do NOT want to re-render the component)

So I would suggest removing error from state and do something like:

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

clearErrors() {
  errorcode = null;
}