反应更新卸载的组件

Question

所以我有这个功能可以从我的 API 中获取播放列表，然后更新状态。

我的问题是，如果我在 API 仍在获取数据时更改路由，它会尝试更新组件，即使它不再安装。这会导致以下控制台错误：

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.

我想知道避免这种冲突的最佳做法是什么。

提前感谢您的回答！

  async getUserPlaylists() {
    let data = await request({ path: '/playlists' });
    data = data || [];

    const sanitizedPlaylists = data.map((item, index) => ({
      key: index,
      name: item.name,
      imageUrl: item.imageUrl,
      ...item,
    }));

    this.setState({
      playlists: sanitizedPlaylists,
      loadingPlaylists: false,
      submitting: false,
    });

    return request.data;
  }

Answer 1

您可以尝试在 componentWillUnmount 中中止请求，这应该会导致 Promise 无法解析：

this.request = request({ path: '/playlists' });
let data = await this.request;

componentWillUnmount() {
  if (this.request) this.request.abort();
}

或者只设置一个标志：

componentWillUnmount() {
  this.unmounted = true;
}

并在调用之前检查它 setState:

if (this.unmounted) return;
this.setState(...)

尽管所有这些可能都是不必要的并发症。您可以忽略开发中的警告。

反应更新卸载的组件

React updating unmounted component

javascript

setstate

reactjs