React - 在 componentDidMount 函数中接收“Uncaught TypeError：this.setState is not a function”

Question

我在我的 React 组件的 componentDidMount 函数中收到以下错误，我不确定原因：

未捕获的类型错误：this.setState 不是函数

我尝试绑定geocode 调用，但这似乎没有帮助。当我调用包含 setState 的本地函数时也会发生这种情况。

我已经在constructor 中绑定了componentDidMount 函数。

有人知道为什么会这样吗？

componentDidMount() {
        if (this.state.initialLoad) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    const pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude,
                    };
                    let geocoder = new google.maps.Geocoder();

                    let latlng = pos;
                    geocoder.geocode({
                        'latLng': latlng
                    },
                        function (results, status) {
                            if (status === google.maps.GeocoderStatus.OK) {
                                console.log(results);
                                if (results[1]) {
                                    let addressObject = results[1].address_components;

                                    const cityType = 'locality';
                                    const stateType = 'administrative_area_level_1';

                                    let city = "";
                                    let state = "";

                                    for (let i = 0; i < addressObject.length; i++) {
                                        console.log(addressObject[i]);
                                        if (addressObject[i].types.includes(cityType)) {
                                            city = addressObject[i].long_name;
                                        } else if (addressObject[i].types.includes(stateType)) {
                                            state = addressObject[i].short_name;
                                        }

                                    }

                                    let isCityStateFound = city != "" && state != "";

                                    if (isCityStateFound) {
                                        jQuery('#city-search-ready-status').val('true');
                                    }

                                    let query = isCityStateFound ? city + ', ' + state : EmptyStr;

                                    console.log(query);

                                    jQuery('.tab-panel').find('.input-text input').val(query);

                                    this.setState({
                                        searchValueCity: city,
                                        searchValueState: state
                                    });

                                    this.performProviderSearch();
                                    this.performLocationSearch();
                                } else {
                                    console.log('No results found');
                                }
                            } else {
                                console.log('Geocoder failed due to: ' + status);
                            }
                        });
                });
        }
    }

Answer 1

欢迎来到 Stack Overflow 社区！！！

您可以使用 ES6 功能轻松解决所有问题。

• 箭头函数 - 它们有一个词法作用域。所以你不必再绑定this。 This resource 很好地比较了 ES6 之前和之后的功能差异。
• ES6 类 - 通过结合箭头函数的强大功能，您现在可以在类构造函数中创建无需绑定 this 的方法。

class App extends Component {
  state = {
    name: "",
  };

  componentDidMount() {
    if (this.state.initialLoad) {
      navigator.geolocation.getCurrentPosition((position) => {
        const pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude,
        };
        let geocoder = new google.maps.Geocoder();

        let latlng = pos;
        geocoder.geocode(
          {
            latLng: latlng,
          },
          (results, status) => {
            // Convert this also to an Arrow Function
            if (status === google.maps.GeocoderStatus.OK) {
              console.log(results);
              if (results[1]) {
                let addressObject = results[1].address_components;

                const cityType = "locality";
                const stateType = "administrative_area_level_1";

                let city = "";
                let state = "";

                for (let i = 0; i < addressObject.length; i++) {
                  console.log(addressObject[i]);
                  if (addressObject[i].types.includes(cityType)) {
                    city = addressObject[i].long_name;
                  } else if (addressObject[i].types.includes(stateType)) {
                    state = addressObject[i].short_name;
                  }
                }

                let isCityStateFound = city != "" && state != "";

                if (isCityStateFound) {
                  jQuery("#city-search-ready-status").val("true");
                }

                let query = isCityStateFound ? city + ", " + state : EmptyStr;

                console.log(query);

                jQuery(".tab-panel").find(".input-text input").val(query);

                this.setState({
                  searchValueCity: city,
                  searchValueState: state,
                });

                this.performProviderSearch();
                this.performLocationSearch();
              } else {
                console.log("No results found");
              }
            } else {
              console.log("Geocoder failed due to: " + status);
            }
          }
        );
      });
    }
  }

  performProviderSearch = () => {
    // Do whatever you want here
    this.setState({
      // Update the state
    });
  };

  performLocationSearch = () => {
    // Do whatever you want here
    this.setState({
      // Update the state
    });
  };

  render() {
    return (
      <div className="App">
        {/* Your HTML Structure */}
      </div>
    );
  }
}

注意 - 不要使用 jQuery 甚至使用 JavaScript 来操作 DOM。如果你这样做了，那么你就没有使用 React 的全部功能。

如果您需要进一步的支持，请告诉我。

Answer 2

尝试将geocoder.geocode的回调移动到组件中的单独函数，在构造函数中绑定它，并将其作为回调传递。 附言不需要绑定componentDidMount。