React ScrollView/FlatList/SectionListのネイティブ非同期（firebase）イメージのフェッチ

Question

Firebaseストレージからフェッチされているイメージが多いSectionListがあります。スクロールダウンすると、急速に多くの警告が生成されます。 WebImageコンポーネントは次のようになります

：あなたは私が実装状態のことを認識させるためにしようとしたが、予想通り、それは働いていない見ることができるように

import React, { Component } from 'react' 
import { View, Image } from 'react-native' 
import firebase from 'firebase' 

class WebImage extends Component { 
    state = { 
    imgsrc: '', 
    mounted: false, 
    } 

    componentDidMount() { 
    this.setState({ mounted: true }) 

    firebase 
     .storage() 
     .ref() 
     .child(this.props.source) 
     .getDownloadURL() 
     .then(url => { 
     if (this.state.mounted) { 
      this.setState({ imgsrc: url }) 
     } 
     }) 
    } 

    componentWillUnmount() { 
    this.setState({ mounted: false }) 
    } 

    render() { 
    ... 
    } 
} 

export default WebImage 

..

Answer 1

次のように動作します。

state = { 
    imgsrc: '', 
    } 

    componentWillMount() { 
    this.ref = firebase 
     .storage() 
     .ref() 
     .child(this.props.source) 
     .getDownloadURL() 
     .then(url => { 
     this.setState({ imgsrc: url }) 
     }) 
    } 

    componentWillUnmount() { 
    this.ref.cancel() 
    }