在ScrollView/FlatList/SectionList中反應本機異步（firebase）圖像獲取

Question

我有一個SectionList，其中包含大量從Firebase存儲中獲取的圖像。當向下滾動時，迅速建立了很多警告。

的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() 
    }