如何在FlatList上的renderItem中调用fetch()? [英] How to call fetch() inside renderItem on FlatList?

问题描述

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

I have been unable to solve this so far, I hope someone from here can help me :)

情况如下:

1. 我使用API​​加载部门中的用户列表，该API将其返回为JSON(有效).

1. I load a list of users from a department using an API which returns it as JSON (this works).

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

For each user in the JSON file, I have to fetch another JSON file containing sensor data (this does not work).

我实际上能够从 getStatus()函数获取JSON数据，但这是不正确的.因为，在呈现FlatList时，仍未获取数据，但是在刷新后调用 fetchUsers()会显示传感器数据，但在所有用户上显示相同的传感器数据，而不是他们自己的特定传感器数据.

I am in fact capable of getting the JSON data from the getStatus() function, but it is not correct. Because, when the FlatList is rendered, the data still has not been fetched, but on refresh, calling fetchUsers(), the sensor data shows up, but it shows the same sensor data on all users and not their own specific sensor data.

此刻，我已经吐出了它在Text元素中接收到的JSON，以便查看返回的内容...

At the moment I have made it spit out what ever JSON it receives in a Text element in order to see what was returned...

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

I am not allowed to upload pictures here, but I have made an album on Imgur which contains images of the application to help explain the issue: 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>
    );
}
}

变量状态是有问题的变量.

我希望我以可以理解的方式提出问题.

I hope I formulated the question in an understandable manner.

用户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
    }
}

推荐答案

您需要像对待患者JSON一样，将 getStatus 的结果存储在组件状态中.假设您处于状态中的状态"对象将患者映射到其状态，则可以执行以下操作:

You need to store the result of getStatus in component state like you do with the patients JSON. Assuming you have a "stats" object in your state that maps a patient to their stats, you can do:

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和用于更改可见性的回调.

Then, in the renderItem function, you can render the stats from state, or render a placeholder text if the stats haven't been loaded yet. Also, you should not make network requests inside a render function, since they can be called quite often and multiple times for the same component. Instead, you should look into the FlatList API and the callbacks for changes in visibility.

希望这对您有帮助...

Hope this helps...

这篇关于如何在FlatList上的renderItem中调用fetch()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！