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

问题描述：

我一直无法迄今为止解决这个问题，我希望从这里有人能帮助我:)如何在FlatList的renderItem中调用fetch（）？

的情况如下：

我从一个部门加载用户的列表使用一个API作为JSON返回它（这工作）。
对于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 
    } 
}

您是否尝试过在renderItem函数中使用async-await？否则，它将渲染而不等待结果 –

答

您需要存储的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和回调以了解可见性的变化。

希望这会有所帮助...

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

相关推荐