如何在反应传单中显示来自 localStorage 的标记位置

如何解决如何在反应传单中显示来自 localStorage 的标记位置

我正在尝试在页面刷新后显示保存的标记位置，但到目前为止还没有运气。 App 部署在此处：https://master.d8pjybx1mf2s7.amplifyapp.com

查找用户 2 是否在用户 1 的范围内是一个基本的 app。我们可以通过点击地图来标记位置。

 handleClick(e){
    this.setState({ currentPos: e.latlng });
    localStorage.setItem('Poslat1',this.state.currentPos.lat);
    localStorage.setItem('Poslon1',this.state.currentPos.lng);
  }
  
  render() {
    return (
      
      <div>
        <Map center={this.props.center} zoom={this.props.zoom} onClick={this.handleClick}>
          <TileLayer
              url='https://{s}.tile.osm.org/{z}/{x}/{y}.png'
          />
          
          { this.state.currentPos && <MyMarker icon={LocationIcon}  position={this.state.currentPos}>

          </MyMarker>}
        {this.state.currentPos && <Circle center={this.state.currentPos} pathOptions={{fillColor: 'blue' }} radius={1000} />}
        </Map>
      </div>
    );
  }

我可以使用用于查找范围的 localStorage 来存储位置数据，我想我可以使用相同的方法以某种方式将标记位置保存在地图上，但它不起作用。

感谢任何帮助。谢谢

解决方法

当组件挂载时，检查 lat1 和 lon1 是否存在于您的 localStorage 中，并且它们是否确实改变了组件状态

componentDidMount() {
   const lat1 = localStorage.getItem("Poslat1");
   const lon1 = localStorage.getItem("Poslon1");
   if (lat1 && lon1) this.setState({ currentPos: [lat1,lon1] });
}

然后在刷新时它们将被持久化。

Demo