获取数据在我<code>componentDidMount()</code>方法阵营与本土<code>fetch(url, ...)</code>“只能更新一安装或安装组件”

Question

我获取数据。

所以我的课看起来像

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