React中componentDidMount内设置位置时setState失效求助

你猜的完全正确！问题根源就是内部回调函数里的this没有指向组件实例，导致你没法调用this.setState来更新地图的中心位置。我来帮你把代码补全并修复这个问题，给你几种常用的解决方案：

方案1：使用箭头函数（最简洁推荐） #

箭头函数会自动捕获外部作用域的this，直接用在回调里就不会有指向问题：

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

const map = { width: '100%', height: '100vh' };
const AnyReactComponent = ({ text }) => <div>{ text }</div>;

export default class Map extends Component {
  constructor(props) {
    super(props)
    this.state = {
      center: { lat: 40.7446790, lng: -73.9485420 },
      zoom: 11
    }
  }

  componentDidMount() {
    // 使用箭头函数作为回调，自动绑定外部的this
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          center: {
            lat: position.coords.latitude,
            lng: position.coords.longitude
          }
        });
      },
      (error) => {
        console.error('获取位置失败:', error);
      }
    );
  }

  render() {
    return (
      <div style={map}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: '你的谷歌地图API密钥' }}
          defaultCenter={this.state.center}
          defaultZoom={this.state.zoom}
          center={this.state.center}
        >
          <AnyReactComponent
            lat={this.state.center.lat}
            lng={this.state.center.lng}
            text="我的位置"
          />
        </GoogleMapReact>
      </div>
    );
  }
}

方案2：提前保存this到变量（传统写法） #

在回调函数外部把组件的this存成一个变量（比如self或者that），然后在回调里用这个变量：

componentDidMount() {
  const self = this; // 保存组件的this
  navigator.geolocation.getCurrentPosition(
    function(position) {
      self.setState({
        center: {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        }
      });
    },
    function(error) {
      console.error('获取位置失败:', error);
    }
  );
}

方案3：用bind绑定this #

手动给回调函数绑定组件的this：

componentDidMount() {
  navigator.geolocation.getCurrentPosition(
    function(position) {
      this.setState({
        center: {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        }
      });
    }.bind(this), // 绑定组件的this
    function(error) {
      console.error('获取位置失败:', error);
    }.bind(this)
  );
}

额外说明 #

这三种方法里，箭头函数是现在React类组件开发中最常用的写法，因为它最简洁直观，不需要额外的变量或者bind操作。另外要记得替换代码里的谷歌地图API密钥，否则地图无法正常加载。

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