react-native - 在平面列表中从 API 呈现 GET JSON 响应时出现问题

Question

我需要创建一个与存储客户信息的 API 交互的应用程序。

我创建了一个getCustDetail函数，它将使用一种GET方法请求有关客户的信息。

这是向 API 发送请求时服务器应发送的内容：

{
    "cust_id": 1,
    "given_name": "John",
    "family_name": "Smith",
    "email": "[e-mail]",
    "recent_purchases": [
        {
            "item_id": 1,
            "price": 20,
            "item_descr": "Small apple”
        },
        {
            "item_id ": 2,
            " price ": 15,
            "item_descr": "Sponge Cake”
        }
      }
    ]
}

这是我的 getGET函数，它获取响应并将其存储在：

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,[e-mail],[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>}
        />

当我尝试在我的应用程序上获取客户信息时，会出现空白的平面列表文本，其中没有数据。

我究竟做错了什么？

标签： react-nativereact-native-android

Answer 1

您必须将extraData道具传递给 Flatlist。如文档中所述：

通过将 extraData={selected} 传递给 FlatList，我们确保 FlatList 本身会在状态更改时重新渲染。如果不设置这个 prop，FlatList 将不知道它需要重新渲染任何项目，因为它是一个 PureComponent，并且 prop 比较不会显示任何更改。

所以让你的平面列表像这样：

<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. 建议使用花括号。