javascript - 在 componentDidMount 中获取数据发生在警告 "Can only update a mounted or mounting component"

Question

我在 componentDidMount() 方法中使用 fetch(url, ...) 在 React Native 中获取数据。

所以我的类(class)看起来像

class Posts extends Component {
  state = {
    posts: []
  };

  componentDidMount() {
    fetch('https://...').then(res => res.json()).then(res => {
      this.setState({ posts: res.posts });
    }
  }

  render() {
    return <FlatList data={this.state.posts} ... />;
  }
}

在我开始使用 redux 和 redux-persist 之前，一切都很好。

现在我收到警告 Warning: Can only update a mounted or mounting component. ...。

我不明白为什么会这样，因为如果在 componentDidMount 中调用它，它应该被挂载。

我想知道我是否需要在 componentWillUnmount 中中止获取，或者我是否应该实际将数据获取到 redux 存储，而不是仅将数据临时存储在“本地组件”中。当我打开大多数其他应用程序时，数据似乎在我打开应用程序时已经加载 - 这是因为数据检索速度非常快，还是它们将数据保存在持久存储中？

我见过一些项目在 componentDidMount 中使用 if (this.isMounted) { .. }，但据我了解此方法的生命周期，组件总是会在此时安装。此外，似乎 isMounted 已被弃用。

我做错了什么？该问题仅在我启动应用程序时出现，因此如果我导航到另一条路线然后返回该路线，则没有问题。

Answer 1

由于 fetch 是异步的，因此当数据到达时组件可能不会被挂载。当你的 then 中的箭头函数被调用时，组件已经完成安装并可能继续呈现。这就是 Promise 的本质。

你应该确保组件在设置它的状态时仍然是挂载的，就像这样:

class Posts extends Component {
  state = {
    posts: []
  };

  componentDidMount() {
    this.mounted = true;
    fetch('https://...').then(res => res.json()).then(res => {
      if(this.mounted) this.setState({ posts: res.posts });
    }
  }

  componentWillUnmount() {
    this.mounted = false;
  }

  render() {
    return <FlatList data={this.state.posts} ... />;
  }
}