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.

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

提前感谢您的回答！

＆＃13;

  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;
  }

＆＃13;

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

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

反应更新未安装的组件

1 个答案: