如何在FlatList的renderItem中調用fetch（）？

Question

我一直無法迄今爲止解決這個問題，我希望從這裏有人能幫助我:)

的情況如下：

1. 我從一個部門加載用戶的列表使用一個API作爲JSON返回它（這工作）。

2. 對於JSON文件中的每個用戶，我必須獲取另一個包含傳感器數據的JSON文件（這不起作用）。

我其實能夠獲得來自的getStatus（）函數 JSON數據，但它是不正確的。因爲當FlatList被渲染時，數據仍然沒有被獲取，但是在刷新時，調用fetchUsers（），傳感器數據顯示出來，但是它在所有用戶上顯示相同的傳感器數據，而不是他們自己的特定傳感器數據。

在我已吐出什麼都JSON接收文本元素中才能看到返回什麼的那一刻...

不准我在這裏上傳圖片，但我已經做了在Imgur相冊，其中包含應用程序的圖像，以幫助解釋這個問題：https://imgur.com/a/5XLpR

export default class SensorData extends Component { 
constructor(props) { 
    super(props); 
    this.stats = null; 
    this.state = { 
     isLoading: true, 
     error: false, 
     userDataSource: [], 
     refreshing: false, 
     time: 30, 
     navigation: props.navigation, 
    }; 
} 

componentDidMount() { 
    this.fetchUsers(); 
} 

fetchUsers(){ 
    return fetch('http://url-to-the-json/json/patients.json') 
     .then((response) => response.json()) 
     .then((response) => { 
      this.setState({ 
       isLoading: false, 
       error: false, 
       userDataSource: response, 
       refreshing: false, 
       time: 30, 
      }, function() { 

      }); 
     }) 
     .catch((error) => { 
      this.setState({ 
       isLoading: false, 
       error: true 
      }) 
     }); 
} 

getStatus(patientId) { 
    fetch("http://url-to-the-json/json/status/" + patientId + ".json") 
     .then((response) => response.json()) 
     .then((responseJson) => { 
      this.stats = responseJson; 
     }) 
     .catch((error) => { 
      Alert.alert("Error"); 
     }); 
    return this.stats; 
}; 

renderItem(item, index) { 
    var x = index % 2 === 0; 
    status = this.getStatus(item.patientId); 
    return (
     <View style={x ? styles.rowEven : styles.rowOdd}> 
      <TouchableOpacity style={styles.rowName} onPress={this.handlePress.bind(this, item)}> 
       <Text style={styles.rowNameText}>{item.firstname} {item.lastname}</Text> 
      </TouchableOpacity> 
      <Text>{JSON.stringify(status)}</Text> 
     </View>   
    ) 
} 

render() { 
    return (
     <View> 
      <View style={styles.reloadTimer}> 
       <Text style={styles.timerText}>Reloading in {this.state.time} seconds.</Text> 
      </View> 
      <View style={styles.listView}> 
      <FlatList 
        data={this.state.userDataSource} 
        renderItem={({ item, index }) => this.renderItem(item, index)} 
        keyExtractor={item => item.patientId} 
        refreshing={this.state.refreshing} 
        onRefresh={this.handleRefresh} 
        ItemSeparatorComponent={this.renderSeparator} 
      /> 
      </View> 
     </View> 
    ); 
} 
} 

變量狀態是一個問題。

我希望我以可理解的方式提出問題。

的用戶JSON文件看起來像這樣：

{ 
    "patientId": "ec276ca9-f9ab-429b-b34e-23fcf448d714", 
    "firstname": "Julie", 
    "lastname": "Nielsen", 
    "birthDate": "1930-01-01T00:00:00Z", 
    "departmentId": "709f59ae-67fe-447c-bed3-7b5912703861", 
    "patientNumber": null, 
    "entryDate": null, 
    "dischargeDate": null, 
    "editedOn": null, 
    "editedBy": null 
    } 

傳感器數據JSON文件看起來像這樣：

{ 
"status": { 
     "in_bed": false, 
     "in_room": true, 
     "clean_diaper": true 
    } 
} 

Answer 1

您需要存儲的getStatus在組件的狀態結果就像你對患者JSON所做的一樣。假設你有你的狀態的「統計」對象，病人映射到他們的統計，你可以這樣做：

getStatus(patientId) { 
    fetch("http://url-to-the-json/json/status/" + patientId + ".json") 
     .then((response) => response.json()) 
     .then((responseJson) => { 
      let stats = Object.assign({}, this.state.stats); 
      stats[patientId] = responseJson; 
      this.setState({ stats: stats }); 
     }) 
     .catch((error) => { 
      Alert.alert("Error"); 
     }); 
}; 

然後，在renderItem功能，可以使從國家統計資料，或呈現一個佔位符文本如果統計信息尚未加載。 另外，你不應該在渲染函數內部發出網絡請求，因爲它們可以被相當頻繁地調用並多次調用相同的組件。相反，您應該查看FlatList API和回調以瞭解可見性的變化。

希望這會有所幫助...