Question

我正在尝试学习如何使用React Native地图，并试图添加自定义地图标记。由于某些原因，当我尝试使用以下代码时，图像会正确更新，但说明只有在第二次单击后才能正确更新。第一次单击将显示“未选中”，但是单击相同的标记将显示我想要的实际文本。我该如何解决？

由于图像正在更新为newImage，所以我知道 this.state.selectedMarkerIndex ===我但是由于某些原因，相同的等式不适用于描述吗？

    state = {busText:[]}
    fetchData=(i, index)=>{    
    fetch('LINK TO GET BUSES'+ i.toString() + '/buses', {method:'GET'})
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({
            selectedMarkerIndex: index,
            busText: responseJson
        },
        ()=>{
          console.log("selected index: " + this.state.selectedMarkerIndex)
        }
    )

    console.log(JSON.stringify(this.state.busText));
    console.log("_______________________________________________________");
})
}


  renderMarkers = ()=>{
  return busStops.stops.map((stop, i) => {
  return <Marker marker
    key={ `${i}` }

    coordinate={{latitude: stop.location.latitude, longitude: stop.location.longitude}}

    title = {stop.stopName}
    image = {this.state.selectedMarkerIndex === i ? newImage : busStopImage} 
    description={this.state.selectedMarkerIndex === i ? JSON.stringify(this.state.busText) : "not selected"}

    onPress={() => {
        this.fetchData(stop.stopID, i)
        console.log(this.state.selectedMarkerIndex + "i :" + i)
      }

    }

    />
})

}

我希望当我用获取的但没有发生的内容单击MapMarker时，其描述会更新。

Answer 1

几件事：为了确保在setState之后执行，您需要将

this.setState({busText: responseJson})

在fetchData()回调中

。更好的是，在要设置selectedMarkerIndex状态的位置上，更早设置busText状态。

另外，如果要解决响应时间问题，请尝试放弃一些console.log（）调用。本机（尤其是iOS）陷入困境。

MapMarker不会立即更新onPress的说明

1 个答案: