javascript - React 更新已卸载的组件

Question

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

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

警告:只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了 setState、replaceState 或forceUpdate。这是一个空操作。

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

预先感谢您的回答!

  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(...)

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