Question

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

所以我的班级看起来像

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存储，而不是仅暂时将数据存储在“本地组件”中。当我打开大多数其他应用程序时，我打开应用程序时似乎已经加载了数据 - 这是因为数据检索非常快还是将数据保存在持久存储中？

我见过他们在if (this.isMounted) { .. }内使用componentDidMount的一些项目，但据我了解此方法的生命周期，此时组件始终已安装。此外，似乎已弃用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} ... />;
  }
}

在componentDidMount中获取数据发生在警告“只能更新已安装或安装的组件”

1 个答案: