来自 json GPS API 的 React Native 动态更新状态
React Native dynamic update state from json GPS API
我有 google 地图,我需要使用 GPS 纬度和经度坐标从自定义 API 动态更新标记。我写了 componentWillMount()
函数,我在其中获取日期,但由于某种原因数据没有传递到 longitude/latitude 的当前状态。我是 React Native 的新手,我已经构建了两个功能齐全的应用程序,但我仍在为状态而苦苦挣扎。
我已经尝试了很多硬编码示例,它们都对我有用,但来自 API 的响应并将其设置为地图上的图钉却不是。
class MarkerTypes extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
jsondata: [],
error: null,
我完成功能的代码的第二部分。这就是APIreturns
{"lat": "45.23846817", "lon": "19.80212021"}
fetchData() {
fetch('API')
.then((response) => response.json())
.then(data =>
this.setState({
jsondata: data,
isLoading: false,
})
)
}
componentDidMount() {
this.fetchData();
console.log(this.jsondata)
}
第三部分,我希望在 API 位置虎钳中进行更改后指出并更新我的标记。我的控制台响应日志看起来不错,但我无法获得稍后为标记传递的值,一直说未定义。
<MapView.Marker
testID="API GPS"
coordinate={this.state.jsondata}
image={this.Marker}
/>
网上好像找不到解决办法。与我的问题相关的所有解决方案似乎都在使用地理位置或对代码部分进行硬编码,这对我的问题根本没有帮助。
Marker 将坐标作为 LatLng,这意味着您需要将坐标值作为
{
latitude:value,
longitude:value
}
在你的情况下,它被传递为 {lat:value, lon:value}
从api获得响应后,将数据存储在对象
中
this.setState({
jsondata: {latitude:data.lat, longitude:data.lon},
isLoading: false,
})
我有 google 地图,我需要使用 GPS 纬度和经度坐标从自定义 API 动态更新标记。我写了 componentWillMount()
函数,我在其中获取日期,但由于某种原因数据没有传递到 longitude/latitude 的当前状态。我是 React Native 的新手,我已经构建了两个功能齐全的应用程序,但我仍在为状态而苦苦挣扎。
我已经尝试了很多硬编码示例,它们都对我有用,但来自 API 的响应并将其设置为地图上的图钉却不是。
class MarkerTypes extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
jsondata: [],
error: null,
我完成功能的代码的第二部分。这就是APIreturns
{"lat": "45.23846817", "lon": "19.80212021"}
fetchData() {
fetch('API')
.then((response) => response.json())
.then(data =>
this.setState({
jsondata: data,
isLoading: false,
})
)
}
componentDidMount() {
this.fetchData();
console.log(this.jsondata)
}
第三部分,我希望在 API 位置虎钳中进行更改后指出并更新我的标记。我的控制台响应日志看起来不错,但我无法获得稍后为标记传递的值,一直说未定义。
<MapView.Marker
testID="API GPS"
coordinate={this.state.jsondata}
image={this.Marker}
/>
网上好像找不到解决办法。与我的问题相关的所有解决方案似乎都在使用地理位置或对代码部分进行硬编码,这对我的问题根本没有帮助。
Marker 将坐标作为 LatLng,这意味着您需要将坐标值作为
{
latitude:value,
longitude:value
}
在你的情况下,它被传递为 {lat:value, lon:value}
从api获得响应后,将数据存储在对象
中this.setState({
jsondata: {latitude:data.lat, longitude:data.lon},
isLoading: false,
})