Проблемы при отображении ответа GET JSON от API в плоском списке - PullRequest
Новая
       2

Проблемы при отображении ответа GET JSON от API в плоском списке

0 голосов
/ 18 марта 2020

Мне нужно создать приложение, которое взаимодействует с API, который хранит информацию о клиентах.

Я создал функцию getCustDetail, которая будет запрашивать информацию о клиенте, используя метод GET.

Это то, что сервер должен отправлять при отправке запроса в API: 

{
    "cust_id": 1,
    "given_name": "John",
    "family_name": "Smith",
    "email": "smith99@hotmail.com",
    "recent_purchases": [
        {
            "item_id": 1,
            "price": 20,
            "item_descr": "Small apple”
        },
        {
            "item_id ": 2,
            " price ": 15,
            "item_descr": "Sponge Cake”
        }
      }
    ]
}

Это моя функция get GET, которая получает ответ и сохраняет его в: 

userDetails: [] state

Я попытался преобразовать строку ответа JSON в массив, чтобы он мог отображаться в моих листах с помощью функции object.values: 

'userDetail: Object.values(resJson),'

getCustDetails () {
      return fetch(‘API URL HERE’,  
         {
            method: 'GET',
            headers: {
               'Content-Type': 'application/json',
            },
         })
         .then((res) => res.json())
         .then((resJson) => {
            this.setState({
               userDetail: Object.values(resJson),
            });
            console.log("The server response is :" + this.state.userDetail)
         })
         .catch((error) => {
            console.log(error);
         });
   }

Сообщение журнала консоли из функции getuserdetail: 

"The server response is : 1,John,Smith,smith99@hotmail.com,[object Object],[object Object]"

Мой плоский список настроен для получения сведений о клиенте и отображения их в приложении: 

       <FlatList
           data={this.state.myDetails}
           keyExtractor={({ user_id }) => user_id}
           renderItem={({ item }) => <View style={styles.list}>
              <Text style={styles.ListText}>{item.cust_id }</Text>
              <Text style={styles.ListText}>{item.given_name}</Text>
              <Text style={styles.ListText}>{item.family_name}</Text>
              <Text style={styles.ListText}>{item.email}</Text>
           </View>}
        />

Когда я пытаюсь получить информацию о клиенте в своем приложении, появляются пустые плоские списки без данных.

Что я делаю не так?

Ответы [ 2 ]

0 голосов
/ 18 марта 2020

Вы должны передать extraData реквизит в Flatlist. Как описано в документе:

Передав extraData = {selected} в FlatList, мы гарантируем, что сам FlatList будет повторно визуализироваться при изменении состояния. Без установки этого реквизита FlatList не знал бы, что ему нужно повторно визуализировать какие-либо элементы, потому что это PureComponent, и сравнение реквизитов не покажет никаких изменений.

Так что сделайте свой плоский список следующим образом: 

<FlatList
  data={this.state.myDetails}
  extraData={this.state}
  keyExtractor={({ user_id }) => user_id}
  renderItem={({ item }) => (
    <View style={styles.list}>
      <Text style={styles.ListText}>{item.cust_id }</Text>
      <Text style={styles.ListText}>{item.given_name}</Text>
      <Text style={styles.ListText}>{item.family_name}</Text>
      <Text style={styles.ListText}>{item.email}</Text>
    </View>
  )}
/>

Также обратите внимание, что я внес изменения в renderItem. Фигурные скобки рекомендуют использовать.

0 голосов
/ 18 марта 2020

должно быть 

renderItem={({ item }) => <View style={styles.list}>
          <Text style={styles.ListText}>{item[0] }</Text>
          <Text style={styles.ListText}>{item[1]}</Text>
          <Text style={styles.ListText}>{item[2]}</Text>
          <Text style={styles.ListText}>{item[3]}</Text>
...