componentDidMountでデータを取得中に警告が発生しました。「マウントまたはマウントされたコンポーネントのみを更新できます」

Question

componentDidMount()メソッドでfetch(url, ...)のReact Nativeでデータを取得します。

だから私のクラスでは、私がreduxとredux-persistを使用して起動するまで、それがうまく働いていたすべての

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

ようになります。

今すぐ警告が表示されます。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} ... />; 
    } 
}