Ajax 回调中的设置状态抛出错误：警告：setState(...)：只能更新已安装或正在安装

我有一个相当简单的反应容器组件，它尝试在从 componentDidMount 调用的 ajax 回调中调用设置状态。完整的错误是：

警告：setState(...)：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了 setState()。这是一个禁止操作。请检查 UserListContainer 组件的代码。

我的 console.log 中的操作顺序是：

render
child-render
componentDidMount
ajax-data
[Big ol Error Message]

我开始使用 async/await，但是当我收到错误时，我返回回调并得到相同的结果。这是相关代码：

    export class UserListContainer extends React.Component<any, any>
{

    constructor() {
        super();
        this.state = {
            users: [], request: {}
        };

    }
    //componentDidMount = async () => {
componentWillMount = () => {
        console.log('componentWillMount');
        //var response: Models.IUserQueryResponse = await Api.UserList.get(this.state.request);
        Api.UserList.get(this.state.request).then((response) => {
            console.log('ajax-data');
            if (response.isOk) {
                this.setState({ users: response.data, request: response.state });
            }
        });
    }
    render() {
        console.log('render');
        return <UserList
            request={this.state.request}
            users={this.state.users}
            onEditClick={this.edit}
            onRefresh={this.refresh}
        />;
    }

任何帮助，将不胜感激。

您无法在 componentWillMount 中设置状态，因为您的组件可能处于过渡状态。它也不会触发重新渲染 https://facebook.github.io/react/docs/react-component.html#componentwillmount。使用 componentWillReceiveProps 或 componentDidUpdate。

现在，除了您的问题之外，您正在从 API 请求的回调中调用 setState。问题是您可能已经卸载了该组件并且不想再设置状态。

你可以用一个简单的标志来解决这个问题

constructor() {
    super();
    this.state = {
        users: [], request: {}
    };
    this.isMounted = false;
}
componentDidMount(){
    this.isMounted = true
}
componentWillUnmount(){
    this.isMounted = false;
}

然后在你的 api 请求中你会这样做。

Api.UserList.get(this.state.request).then((response) => {
    console.log('ajax-data');
    if (response.isOk && this.isMounted) {
        this.setState({ users: response.data, request: response.state });
    }
});