来自firebase的数据未映射本机反应答案

【问题标题】：data from firebase not mapped react native来自firebase的数据未映射本机反应
【发布时间】：2021-03-10 08:31:45
【问题描述】：

我有来自 firebase 的数据，我想将它映射到我的自定义面板，但它似乎没有映射（我的面板没有显示）但是当我控制台记录它时，数据成功检索。这是我的代码

constructor(props) {
        super(props);
        this.state ={
            requests:[]
        }
      }
      
      componentDidMount(){
        this.fetchRequests();
      }
      
      fetchRequests(){
        this.subscriber = firebase.firestore()
        .collection("requests").onSnapshot(docs => {
            let requests = []
            docs.forEach(doc => {
              requests.push(doc.data())
            })
            this.setState({requests})
        })
    }
    
    buildPanels() { 
        this.state.requests.map((req, idx) => {
          return <View key={idx} style={styles.panel}>
          <View style={{flex: 1}}>
              <View style={styles.panelRow}>
                <Text style={styles.panelText}>Nama Resipien</Text>
                <Text style={styles.panelText}>{req.name}</Text>  
              </View>
              <View style={styles.panelRow}>
                <Text style={styles.panelText}>Golongan Darah</Text>
                <Text style={{flex: 0.5}}>{req.golDarah}</Text>  
              </View>
          </View>
      </View>
        })
        
        render(){
        return(
            <View style={styles.container}>
                      <ScrollView>
                        {this.buildPanels()}
                      </ScrollView>
            </View>
        );
    }

【问题讨论】：

标签： javascript firebase react-native google-cloud-firestore

【解决方案1】：

在你的代码中添加return方法

buildPanels() { 
        return this.state.requests.map((req, idx) => {
          return <View key={idx} style={styles.panel}>
          <View style={{flex: 1}}>
              <View style={styles.panelRow}>
                <Text style={styles.panelText}>Nama Resipien</Text>
                <Text style={styles.panelText}>{req.name}</Text>  
              </View>
              <View style={styles.panelRow}>
                <Text style={styles.panelText}>Golongan Darah</Text>
                <Text style={{flex: 0.5}}>{req.golDarah}</Text>  
              </View>
          </View>
      </View>
})

【讨论】：