Question

到目前为止我无法解决这个问题，我希望有来自这里的人能帮助我:)。

情况如下：

我使用API将部门中的用户列表加载为JSON（这可行）。
对于JSON文件中的每个用户，我必须获取包含传感器数据的另一个JSON文件（这不起作用）。

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

目前我已经将它在Text元素中收到的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以及可见性更改的回调。

希望这会有所帮助......

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

1 个答案: