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：错误组件仍然显示（因为您不想重新渲染组件）

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

toggle()

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

1 个答案: