无法在 React Native 中呈现来自 API 的数据

Question

我有一个 API 如下所示：

[
{
"available_quantity": 500, 
"available_quantity_units": "Units", 
"product_name": "ABC", 
"product_price": "35.00", 
},
{
"available_quantity": 500, 
"available_quantity_units": "Units",  
"product_name": "XYZ", 
"product_price": "50.00", 
}
]

我正在尝试在 React Native 中显示数据。其代码如下所示：

  const showData = () => {
    kioskData.map((item, index) => {
      return (
        <View>
          <Text>{item.product_price}</Text>
        </View>
      );
    });
  };
    
  return (
    <View style={styles.container}>
      {loading ? (
        <ActivityIndicator size="large" color={COLORS.blue} />
      ) : (
        showData()
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

但是屏幕上没有显示数据，也没有报错。请协助我解决问题。感谢您提前抽出时间。

Answer 1

您在地图函数中忘记了 return 组件：

kioskData.map((item, index) => {
  return <View>
    <Text>{item.product_price}</Text>
  </View>;
});

无法在 React Native 中呈现来自 API 的数据

Unable to render data from API in React Native

react-native

return

map-function