Question

需要您的帮助！问题是我的应用突然停止工作。它确实显示了标记。但是现在我看到这个“未捕获的TypeError：无法读取null的属性'lat'”，这很奇怪，因为它工作得很好，我所做的一切都将它们保存到存档中，但是当解压缩时却没有工作了。如果有帮助，我会提供一些代码，但向您保证我什么都没做。

 componentDidMount(){
 this.loadData()
 }
loadData() {
// fetch('/api/issues').then(response => {
  fetch('/api/issues').then(response => {
  if (response.ok) {
    response.json().then(data => {
      this.setState({markers:data.records});
    });
  } else {
    response.json().then(error => {
      alert("Failed to fetch issues:" + error.message)
    });
  }
}).catch(err => {
  alert("Error in fetching data from server:", err);
});


}
  render() {
    return (
      <div>
         <Map center={{lat:51.505,lng:-0.09}} 
            zoom={13}>
         <TileLayer
            attribution='&copy; 
      <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
         /> 

        {this.state.markers.map((position,_id) => 
          <Marker 
             key={_id} 
             position={position}>
          </Marker>
         )}
      </Map>    
    </div>
    );
  }
}

Answer 1

解决方案非常简单。这一切都是因为在mongoDB中，键“ lat”和“ lng”下的某些字段为空，因为我没有提供任何值。因此，问题与代码无关，也与依赖无关。稍后将在编写值验证时使用它。

React-Leaflet应用程序突然停止工作未捕获的TypeError：无法读取null的属性“ lat”

1 个答案: