javascript - react 警告 : Can only update a mounted or mounting component

Question

我有 2 个组件，我通过使用 react router dom 中的 Route 组件在它们之间进行路由。其中一个组件在 componentDidMount 事件(使用 axios 包)上从虚拟 API 服务器获取数据，代码如下:

    componentDidMount() {
    axios.get('/posts')
        .then(response => {
            const posts = response.data.slice(0, 4);
            const updatedPost = posts.map(post => {
                return {
                    ...post,
                    author: 'Max'
                };
            });
            this.setState({ posts: updatedPost });
        })
        .catch(error => {
            console.log(error);
        });
}

错误是，当我从一个组件重定向到另一个组件的速度太快，或者速度不是那么快时，我会在控制台上收到此警告:

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Please check the code for the Posts component.

我该怎么做才能解决这个问题？我试图通过以下方式弄清楚: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op但我真的不明白什么时候通过裁判以及如何通过。如果有人能举例说明如何解决这个问题，那就太好了。谢谢!

Answer 1

react 警告有效。当您在已经卸载 的组件上调用setState 时应该如何 react 。如果组件由于某种原因(例如用户导航离开)将被卸载，则正确的处理方法是取消数据获取请求。

以下是官方的建议blog .利用 componentWillUnmount 生命周期

class ExampleComponent extends React.Component {
  state = {
    externalData: null,
  };

  componentDidMount() {
    this._asyncRequest = asyncLoadData().then(
      externalData => {
        this._asyncRequest = null;
        this.setState({externalData});
      }
    );
  }

  componentWillUnmount() {
    if (this._asyncRequest) {
      this._asyncRequest.cancel();
    }
  }

  render() {
    if (this.state.externalData === null) {
      // Render loading state ...
    } else {
      // Render real UI ...
    }
  }
}

看起来像Axios supports “可取消”请求。