如何在React Leaflet中从localStorage显示标记位置？刷新后失效求助

首先，咱们先理清问题根源：你已经实现了点击地图时把位置存到localStorage，但组件重新加载（刷新页面）时，并没有从localStorage里读取之前保存的位置并同步到组件的state中，所以currentPos状态是空的，标记和圆圈自然就不显示了。另外，你的handleClick里还有一个setState异步的小问题需要修正。

1. 组件初始化时恢复localStorage中的位置 #

在类组件的constructor里，我们可以先读取localStorage里的经纬度，转换成数字后设置到初始state中：

constructor(props) {
  super(props);
  // 从localStorage读取保存的位置，注意转成数字，同时处理不存在的情况
  const savedLat = localStorage.getItem('Poslat1');
  const savedLon = localStorage.getItem('Poslon1');
  
  this.state = {
    currentPos: savedLat && savedLon ? {
      lat: Number(savedLat),
      lng: Number(savedLon)
    } : null
  };
  
  // 记得绑定handleClick的this指向（如果之前没绑定的话）
  this.handleClick = this.handleClick.bind(this);
}

2. 修正setState异步导致的存储错误 #

因为setState是异步操作，你当前的代码里在setState后直接读取this.state.currentPos，拿到的其实是更新前的旧值。应该用setState的回调函数来处理存储操作：

handleClick(e){
  const newPos = e.latlng;
  this.setState({ currentPos: newPos }, () => {
    // 这里的回调会在state更新完成后执行，能拿到最新的state值
    localStorage.setItem('Poslat1', this.state.currentPos.lat);
    localStorage.setItem('Poslon1', this.state.currentPos.lng);
  });
}

3. 完整的修改后代码示例 #

把上面的修改整合到你的组件中，大概是这样：

class YourMapComponent extends React.Component {
  constructor(props) {
    super(props);
    const savedLat = localStorage.getItem('Poslat1');
    const savedLon = localStorage.getItem('Poslon1');
    
    this.state = {
      currentPos: savedLat && savedLon ? {
        lat: Number(savedLat),
        lng: Number(savedLon)
      } : null
    };
    
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e){
    const newPos = e.latlng;
    this.setState({ currentPos: newPos }, () => {
      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只能存储字符串，所以读取时一定要用Number()转换成数字类型，避免出现字符串类型的经纬度导致地图组件识别失败。
• 记得判断localStorage中的值是否存在，如果用户第一次使用应用还没点击过地图，就保持currentPos为null，避免渲染错误。

这样修改后，刷新页面时组件会自动从localStorage恢复之前保存的位置，地图标记和圆圈就能正常显示啦！

内容的提问来源于stack exchange，提问作者Shoaib Ahmed