如何在FlatList上的renderItem内部调用fetch()

Question

到目前为止，我一直无法解决这个问题，我希望这里的人能帮助我：)

情况如下：

1. 我使用API从一个部门加载一个用户列表，该API将其返回为JSON(这很有效)。

2. 对于JSON文件中的每个用户，我必须获取另一个包含传感器数据的JSON文件(这不起作用)。

事实上，我能够从getStatus()函数中获取JSON数据，但这是不正确的。因为，当FlatList被渲染时，数据仍然没有被提取，但在刷新时，调用fetchUsers()，传感器数据会显示出来，但它在所有用户上显示相同的传感器数据，而不是他们自己的特定传感器数据。

目前，我已经让它吐出它在Text元素中接收到的JSON，以便查看返回了什么。。。

我不允许在这里上传图片，但我在Imgur上制作了一个相册，其中包含应用程序的图像，以帮助解释这个问题：https://i.stack.imgur.com/jm4Qw.jpg

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

您需要像处理患者JSON一样，将getStatus的结果存储在组件状态中。假设你的状态中有一个"统计数据"对象，可以将患者映射到他们的统计数据，你可以这样做：

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

希望这能帮助。。。