Reactjs React Native,TypeError:undefined在
React Native是说Undefined不是一个对象,而它显然是一个对象!!我不知道发生了什么事 请看下面的代码。向下浏览到Reactjs React Native,TypeError:undefined在,reactjs,typescript,react-native,expo,Reactjs,Typescript,React Native,Expo,React Native是说Undefined不是一个对象,而它显然是一个对象!!我不知道发生了什么事 请看下面的代码。向下浏览到render()函数。请参阅以下内容控制台.日志(跳线.坐标) console.log(cords.coords)输出以下内容 08:37:22: Object { 08:37:22: "coords": Object { 08:37:22: "accuracy": 5, 08:37:22: "al
render()
函数。请参阅以下内容<代码>控制台.日志(跳线.坐标)代码>
console.log(cords.coords)代码>输出以下内容
08:37:22: Object {
08:37:22: "coords": Object {
08:37:22: "accuracy": 5,
08:37:22: "altitude": 0,
08:37:22: "altitudeAccuracy": -1,
08:37:22: "heading": -1,
08:37:22: "latitude": 39.946313,
08:37:22: "longitude": -82.810829,
08:37:22: "speed": -1,
08:37:22: },
08:37:22: "timestamp": 1522413346644.865,
08:37:22: }
有人会说,要检索这些数据,您必须执行以下操作console.log(cords.coords.coords.latitude)
获取纬度。但它说它没有定义。它说它没有定义,即使我做了console.log(cords.coords.coords)
?我做错了什么
注意console.log(跳线.坐标)代码>是脚本中触发错误的位置
请记住,以下代码确实有效。仅当我更改console.log(cords.coords)时代码>至控制台.log(跳线.坐标.坐标.纬度)代码>它会断开
import React,{Component}来自'React';
从“react native”导入{平台、样式表、维度、文本、视图};
从“react native maps”导入MapView,{PROVIDER_GOOGLE};
从“expo”导入{常量、位置、权限};
导出默认类MapScreen扩展组件{
建造师(道具){
超级(道具);
此.state={
标记:[{
标题:“你好”,
坐标:{
纬度:39.946313,
经度:-82.810829
},
},
{
标题:“你好”,
坐标:{
纬度:39.945838,
经度:-82.813018
},
}
]
}
log(“获取地理同步”);
这是。_getLocationAsync();
}
_getLocationAsync=async()=>{
日志(“加载地理同步”);
//位置:setApiKey(“Aizasyby45685CdPy5A4SS29Il2ZjivTvyTmyk”);
让{status}=wait Permissions.askAsync(Permissions.LOCATION);
如果(状态!=“已授予”){
这是我的国家({
locationResult:'访问位置的权限被拒绝',
});
}
控制台日志(“加载位置1”);
让location=wait Expo.location.getCurrentPositionAsync({enableHighAccurance:true});
控制台日志(“检索到的位置”);
this.setState({coords:location});
};
render(){
const{params}=this.props.navigation.state;
设coords=params?params.coords.coords:null;
设cords=this.state;
控制台.日志(跳线.坐标);
//让coords=state.locationResult.coords;
返回(
{this.state.markers.map(marker=>(
))}
);
}
}
const styles=StyleSheet.create({
容器:{
宽度:'100%',
高度:'100%',
},
});
最好在组件装入componentDidMount生命周期方法后发出API请求,代码的问题是,在初始渲染时this.state.coords未定义正确,并且在解决API请求后,使用this.setState方法更新this.state.coords并定义this.state.coords。所以为了让它发挥作用,试试这个
return this.state.coords instanceof Object ? (
<View style={{flex: 1}}>
<MapView
style={ styles.container }
initialRegion={{
latitude:coords.latitude,
longitude:coords.longitude,
latitudeDelta:0.0992,
longitudeDelta:0.0421,
}}
>
{this.state.markers.map(marker => (
<MapView.Marker
coordinate={marker.coordinates}
title={marker.title}
/>
))}
</MapView>
</View>
) : <Text>Fetching, Please wait....</Text>;
是否返回对象的this.state.coords实例?(
{this.state.markers.map(marker=>(
))}
):正在提取,请稍候。。。。;
这是错误所在的行:latitude:coords.latitude吗?它不是指coords.latitude而不是cords.coords.latitude吗?console.log(cords.coords)代码>是触发错误的地方。`latitude:coords.latitude'工作正常,因为如果查看'render()'函数下的内容。我从let coords=params中提取该值?params.coords.coords:空代码>。我创建了cords
变量,以最终替换该变量。如果替换console.log(cords.coords),则进行更正代码>至控制台日志(跳线、坐标、纬度)代码>错误被触发你是说coords.coords?您已经粘贴了跳线。另外,let cords=this.state
应该始终失败,因为您执行的是setState({coords})而不是setState({cords})。它不会失败,因为我正在将状态对象放入cords
中。因此,要检索coords
我必须做cords.coords
,而且它确实有效。只有当我执行cords.coords.coords.latitude
时,它才会失败。查看帖子中我的对象的结构。终端数据。这是很好的了解,但这不是错误被触发的地方。我在帖子中添加了触发错误的地方<代码>控制台.日志(跳线.坐标)代码>是错误被触发的地方。目前的视图实际上运行良好,因为其中的数据是从let coords=params提取的?params.coords.coords:空代码>注意如果我更换控制台.log(cords.coords)代码>至控制台日志(跳线、坐标、纬度)代码>触发错误。现在,在我添加console.log(cords.coords.latitude)之前,上面的代码可以正常工作代码>立即console.log(cords.coords)代码>只有在我将其更改为console.log(cords.coords.latitude)时才能正常工作代码>它会断开。我已经更新了帖子。谢天谢地。仅当我执行console.log(cords.coords.coords.latitude)时代码>或控制台.log(cords.coords.coords)代码>它失败了。检查poston初始加载中对象的结构this.state.cords未定义,将调用渲染函数,并且由于this.state.cords.coords未定义,可能会触发错误。
return this.state.coords instanceof Object ? (
<View style={{flex: 1}}>
<MapView
style={ styles.container }
initialRegion={{
latitude:coords.latitude,
longitude:coords.longitude,
latitudeDelta:0.0992,
longitudeDelta:0.0421,
}}
>
{this.state.markers.map(marker => (
<MapView.Marker
coordinate={marker.coordinates}
title={marker.title}
/>
))}
</MapView>
</View>
) : <Text>Fetching, Please wait....</Text>;