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

Posted 2023-02-23

【中文标题】undefined 不是一个函数（\'....data.map....\' 附近）|React native

【英文标题】：undefined is not a function (near '....data.map....') |React nativeundefined 不是一个函数（'....data.map....' 附近）|React native

【发布时间】：2021-01-04 14:06:29

【问题描述】：

我是 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。

【问题讨论】：

数据是数组还是对象？似乎是一个对象。我错了吗？

我的错。它是一个对象。你能指导我吗？我尝试了其他不起作用的方法。

【参考方案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,
  ,
);

【讨论】：

非常感谢科坦。你能帮我做另一件事吗？该 api 还返回包含污染物名称及其值的 iqai，我试图使用 map 函数访问它，但它不起作用。你能帮忙吗？

我可以知道为什么即使在解决了 OP 提到的问题之后，答案还是被否决了吗？

不明白。我已经接受了答案并且代码正在运行。

【参考方案2】：

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

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

【讨论】：

没用。很抱歉迟到提到数据是 json 对象而不是数组。

【参考方案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>

【讨论】：

data ?.aqi 工作正常。但是对于 map 函数给出 TypeError: undefined is not an object (evalating 'data.iaqi.map') 错误。

是的，因为data.iaqi 不是数组而是对象