Wie fetch() innerhalb von renderItem auf FlatList aufrufen? wie folgt

Question

ich nicht in der Lage gewesen, so weit so zu lösen, hoffe ich, von hier jemanden, der mir :)

Die Situation ist helfen kann:

1. Ich lade eine Liste von Benutzern aus einer Abteilung Verwenden einer API, die es als JSON zurückgibt (das funktioniert).

2. Für jeden Benutzer in der JSON-Datei muss ich eine andere JSON-Datei mit Sensordaten abrufen (das funktioniert nicht).

Ich bin in der Tat der Lage, die JSON-Daten aus der getStatus() Funktion bekommen, aber es ist nicht richtig. Wenn die FlatList gerendert wird, wurden die Daten zwar noch nicht abgerufen, aber beim Aufrufen des Aufrufs fetchUsers() werden die Sensordaten angezeigt, sie zeigen jedoch dieselben Sensordaten für alle Benutzer und nicht ihre eigenen spezifischen Sensordaten an . Ich bin nicht Bilder erlaubt, um zu sehen, was zurückgegeben ...

erhält hier hochladen,

Im Moment habe ich gemacht es ausspucken, was immer JSON es in einem Textelement, um aber ich habe eine gemacht Album auf Imgur die Bilder der Anwendung enthält, um das Problem zu erklären: 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> 
    ); 
} 
} 

die Variable Status ist die in Frage.

Ich hoffe, ich habe die Frage verständlich formuliert.

Die Benutzer JSON-Datei sieht wie folgt aus:

{ 
    "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 
    } 

Die Sensordaten JSON-Datei wie folgt aussieht:

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

Answer 1

Sie müssen das Ergebnis der getStatus in Komponente Zustand speichern, wie du es mit den Patienten JSON machst. Angenommen, Sie haben eine „Statistik“ Objekt in Ihrem Zustand, dass ein Patient auf ihre Statistiken abbildet, können Sie tun:

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"); 
     }); 
}; 

Dann wird in der renderItem Funktion können Sie die Statistiken von Staat machen, oder einen Platzhalter Text machen wenn die Statistiken noch nicht geladen wurden. Sie sollten auch keine Netzwerkanforderungen innerhalb einer Renderfunktion machen, da sie oft und mehrfach für dieselbe Komponente aufgerufen werden können. Stattdessen sollten Sie in der FlatList-API und den Callbacks nach Änderungen in der Sichtbarkeit suchen.

Hoffe, das hilft ...