Próbuję przeanalizować odpowiedź JSON z następujących danych JSON: {"Location_id": 73, "Location_name": "Aunt Mary's Great Coffee Shop", "Location_town" ...

0
Daniel Pinnington 15 marzec 2021, 17:32

2 odpowiedzi

Najlepsza odpowiedź

Należy pamiętać, że powyższy jest obiekt, a FlatList musi otrzymać tablicę (następnie połączenia renderItem z każdym elementem w tej tablicy i wyświetla tę listę elementów).

Istnieje kilka zmian, które powinieneś zrobić (zakładam, że chcesz wyświetlić listę elementów z tablicy {x1}}):

  1. W konstruktorze pole lokalizacji powinno być obiektem i jest początkowo null:
this.state = {
  location: null,
}
  
  1. W swojej metodzie renderowania pierwsza sprawdza this.state.location istnieje i nic nie renderuje ani nie ma ekranu ładowania, jeśli nie: nie:
render() {
  const { location } = this.state;

  if (location === null) return null;
  ...
}
  1. W metodzie renderowania, przejdź this.state.location.location_reviews do swojego FlatList:
const { location } = this.state;

<FlatList
  data={location.location_reviews}
  ...
/>
  1. Wreszcie dostosuj metodę renderItem:
renderItem = ({item, index}) => {
  return (
    <View>
        <Text>{item.review_body}</Text>
        <Text>{item.review_id}</Text>
    </View>
  );
}

Uwaga: Nie przetestowałem tego, ponieważ przekąska nie działa. Może być konieczne dostosowanie jeszcze kilku rzeczy (tj. Zmieniłem to .state.Locations -> to

0
Marek Lisik 15 marzec 2021, 15:41

Udało mi się uzyskać mieszkanie, aby skompilować za pomocą następujących

  render() {
    if (this.state.isLoading) {
      return (
        <View>
          <Text>loading...</Text>
        </View>
      )
    } else return (
                  <View>
                      <Text>Name: {this.state.locations.location_name}</Text>
                      <FlatList
                        data={this.state.locations.location_reviews}
                        renderItem={({item}) => (
                          <View>
                              <Text>review id: {parseInt(item.review_id)}</Text>
                              <Text>body: {item.review_body}</Text>
                              <Text>overall rating: {parseInt(item.overall_rating)}</Text>
                              <Text>price rating: {parseInt(item.price_rating)}</Text>
                              <Text>quality rating: {parseInt(item.quality_rating)}</Text>
                              <Text>cleanliness rating: {parseInt(item.clenliness_rating)}</Text>
                          </View>
                        )}
                        keyExtractor={(item) => item.review_id.toString()}
                      />
                  </View>
          );
    }
0
Daniel Pinnington 15 marzec 2021, 15:41