Javascript React Native使用map渲染对象：undefined不是对象（计算'；currentLocation.coords'；）

我有一个名为currentLocation的变量，它是我从navigator.geolocation.getCurrentPosition（）方法获取的对象

---

我的问题是如何使用map在React本机应用程序中渲染它？我得到一个错误：undefined不是一个对象（计算'currentLocation.coords'）。我希望能够映射到这个对象上，并简单地将数据显示为文本！我是新来的，所以任何帮助都将不胜感激。谢谢大家!

代码如下：

export default class HomeScreen extends React.Component {
  constructor(props) {
        super(props)      
        this.state = 
        {
            currentLocation : '',
        }
    }
  async componentDidMount() {

    var location
    setInterval(() => {

    navigator.geolocation.getCurrentPosition(
    position => {
        location = JSON.stringify(position)
        //console.log(location)
        this.setState({ location })
    },

    error => Alert.alert(error.message),
    { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }

    );
    this.setState({ currentLocation : location })    
    }, 1000)    
    }   

  render() {
    var { currentLocation } = this.state
    if(typeof(currentLocation) != undefined)
    console.log('Inside render =========> ', currentLocation.coords)

        return (


  )     
  } 
}

---

你可能正在寻找这样的包裹。

---

您可以使用MapView组件在react本机应用程序上渲染地图，并使用Marker组件锁定当前位置。我认为文档可以帮助您。

您希望在对象上循环并将数据显示为文本。您可以使用

object.keys（）

以下是如何做到这一点-

const p = {
    "p1": "value1",
    "p2": "value2",
    "p3": "value3"
};

Object.keys(p).map((i) => {
  console.log(i, p[i])  // i will be the key of object and p[i] will be the value of 
   key//
   //return jsx using the above logic//
})

您可以在此处查看循环对象的其他方法-

希望这对你有帮助

编辑：-
错误是因为您的状态不是对象。这是一个字符串，因为你这样做了

location = JSON.stringify(position)

您可以删除此stringify或您可以执行的内部渲染

 const currentLocation = JSON.parse(this.state.currentLocation)

如果是物体

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';


let obj = {"timestamp":1575687610918,"mocked":false,
"coords":{"altitude":0,"heading":0,"longitude":72.9815203,
"latitude":19.2076923,"speed":0,"accuracy":35.90299987792969
}}

export default class App extends React.Component {
  render() {
    const  {timestamp, coords } = obj;
    return (
      <View>
        <Text>{timestamp}</Text>
        <Text>{coords.latitude}</Text>
        <Text>{coords.longitude}</Text>
      </View>
    );
  }
}

import*as React from'React'；
从“react native”导入{Text，View，StyleSheet}；
让obj={“timestamp”：1575687610918，“mocked”：false，
“坐标”：{“高度”：0，“航向”：0，“经度”：72.9815203，
“纬度”：19.2076923，“速度”：0，“精度”：35.90299987792969
}}
导出默认类App扩展React.Component{
render（）{
const{timestamp，coords}=obj；
返回(
{时间戳}
{坐标纬度}
{坐标经度}
);
}
}

如果它是一个对象数组

let arr = [{"timestamp":1575687610918,"mocked":false,
"coords":{"altitude":0,"heading":0,"longitude":72.9815203,
"latitude":19.2076923,"speed":0,"accuracy":35.90299987792969
}}]
export default class App extends React.Component {
  render() {
    return (
      <View>
       {arr && arr.map(a=>
       <View key={Math.random()*10000}>
        <Text>{a.timestamp}</Text>
        <Text>{a.coords.latitude}</Text>
        <Text>{a.coords.longitude}</Text>
        </View>
       )}
     </View>
    );
  }
}

让arr=[{“timestamp”：1575687610918，“mocked”：false，
“坐标”：{“高度”：0，“航向”：0，“经度”：72.9815203，
“纬度”：19.2076923，“速度”：0，“精度”：35.90299987792969
}}]
导出默认类App扩展React.Component{
render（）{
返回(
{arr&&arr.map（a=>
{a.时间戳}
{a.coords.latitude}
{a.坐标.经度}
)}
);
}
}
我不太明白。是否要映射到此对象并显示数据？或者你想使用这些数据并将其显示在谷歌地图上。我想能够映射到这个对象上，并简单地将数据显示为文本！编辑问题。这不是他要求的。currentLocation.coords.map（坐标=>console.log（坐标.经度））这样做是否正确，以便我可以在控制台上打印它？不
currentLocation.coords
本身就是一个对象。你也需要在上面使用Object.keys。
currentLocation.coords.Object.keys（（i）=>console.log（currentLocation.coords[i]）
这是正确的方法。我得到的错误是“undefined”不是一个对象（评估“currentLocation.coords”）@sublime\u arch你在问题中提到的主要对象currentLocation对吗？你能用console.log（currentLocation.coords）吗？
let arr = [{"timestamp":1575687610918,"mocked":false,
"coords":{"altitude":0,"heading":0,"longitude":72.9815203,
"latitude":19.2076923,"speed":0,"accuracy":35.90299987792969
}}]
export default class App extends React.Component {
  render() {
    return (
      <View>
       {arr && arr.map(a=>
       <View key={Math.random()*10000}>
        <Text>{a.timestamp}</Text>
        <Text>{a.coords.latitude}</Text>
        <Text>{a.coords.longitude}</Text>
        </View>
       )}
     </View>
    );
  }
}