undefined 不是一个函数（'....data.map....' 附近）|React native

Question

我是 React native 的新手，并试图解构我使用 map 函数从我的 API 调用中获得的 json 响应，并且不知何故它给了我上述错误。我想使用文本组件显示 aqi 和主要污染物。我正在使用 AQICN API。

import React,{ useState , useEffect} from 'react';
import { StyleSheet, Text, View ,ActivityIndicator, ScrollView,FlatList} from 'react-native';
import * as Location from 'expo-location';


export default function HomeScreen({navigation}) {

  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);
  //Lat and Long

  const [latitude, setLatitude] = useState(null);
  const [longitude , setLongitude]= useState(null);
  const [data, setData] = useState([]);

  const [loader, setLoader]=useState(true);


  useEffect(() => {
    (
      async () => {
      let { status } = await Location.requestPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Permission Denied');
        return;
      }

      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
      //Changes
      setLatitude(location.coords.latitude);
      setLongitude(location.coords.longitude);

      const la=latitude;
      const lo=longitude;
      
      async function AqicnApiCall() {
        
          let res = await fetch("https://api.waqi.info/feed/geo:"+ latitude +";"+ longitude +"/?token=ac3a71fc80931abd95ede14c2040f0678f578703")
        .then((response) => response.json())
        .then((json) => setData(json.data))
        .catch((error) =>console.log(error))
         
        }    
        
        AqicnApiCall();
            
    })();
  }, [latitude, longitude]);


    //const obj=JSON.stringify(data);
    
    


    return (
    <ScrollView style={styles.container}>
        
        {
          data.map((d) =>{
            console.log(d);
            return(
              <Text style={styles.container}>{d.data.aqi}</Text>
            )
          })
        }
    </ScrollView>
  );
}





   const styles= StyleSheet.create({
     container: {
       padding:20,
       marginTop:15,
       margin:10,

     },
     paragraph : {
       padding:20,
       marginTop:5,
     }


   });

这是 API 响应，我需要主要污染物和 aqi。

Answer 1

工作应用：Expo Snack

访问aqi 和dominentpol，如下所示：

 return (
    <ScrollView style={styles.container}>
      <Text style={styles.container}>AQI: {data?.aqi}</Text>
      <Text style={styles.container}>
        Dominant Pollutant: {data?.dominentpol}
      </Text>
    </ScrollView>
  );
}

完整的工作代码：

import React, { useState, useEffect } from 'react';
import {
  StyleSheet,
  Text,
  View,
  ActivityIndicator,
  ScrollView,
  FlatList,
} from 'react-native';
import * as Location from 'expo-location';

export default function HomeScreen({ navigation }) {
  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);
  //Lat and Long

  const [latitude, setLatitude] = useState(null);
  const [longitude, setLongitude] = useState(null);
  const [data, setData] = useState([]);

  const [loader, setLoader] = useState(true);

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Permission Denied');
        return;
      }

      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
      //Changes
      setLatitude(location.coords.latitude);
      setLongitude(location.coords.longitude);

      const la = latitude;
      const lo = longitude;

      async function AqicnApiCall() {
        let res = await fetch(
          'https://api.waqi.info/feed/geo:' +
            latitude +
            ';' +
            longitude +
            '/?token=ac3a71fc80931abd95ede14c2040f0678f578703'
        )
          .then((response) => response.json())
          .then((json) => {
            console.log('data: ', json.data);
            setData(json.data);
          })
          .catch((error) => console.log(error));
      }

      AqicnApiCall();
    })();
  }, [latitude, longitude]);

  //const obj=JSON.stringify(data);

  return (
    <ScrollView style={styles.container}>
      <Text style={styles.container}>AQI: {data?.aqi}</Text>
      <Text style={styles.container}>
        Dominant Pollutant: {data?.dominentpol}
      </Text>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    marginTop: 15,
    margin: 10,
  },
  paragraph: {
    padding: 20,
    marginTop: 5,
  },
});

Answer 2

我认为某些 d.data 未定义或为空。请试试这个。

<ScrollView style={styles.container}>
    
    {
      data && data.map((d) =>{
        console.log(d);
        return(
          <Text style={styles.container}>{d?.data?.aqi}</Text>
        )
      })
    }
</ScrollView>
    

Answer 3

由于数据不是数组，我看到您只想显示aqi 值，

<ScrollView style={styles.container}>
    <Text style={styles.container}>{data?.aqi}</Text>
</ScrollView>

在屏幕截图上，您似乎只能在 data.attributions 上进行迭代。

<ScrollView style={styles.container}>
    {data.attributions.map(attr => <Text>{attr.something}</Text>}
</ScrollView>