Javascript 我可以从谷歌地图api获取数据，但我可以'；t使用数据更新状态

我试图从谷歌api中获取地理代码，将其保存在状态中，并将其传递给谷歌地图组件。我将地理代码作为对象正确地获取（如{lat:37.5397407，lng:126.9895666}），但是，状态没有更新，也没有执行“console.log（this.state）”。我做错什么了吗

import React from "react";
import PeopleInfoStyle from "../../../styles/presentational/PeopleInfoStyle";
import Carousel from "../../containers/Carousel/Carousel";
import GoogleMap from "../../presentational/GoogleMap/GoogleMap";

class PeopleInfo extends React.Component {
  state = {};

  componentDidMount() {
    let geoData = {};
    fetch(
      `https://maps.googleapis.com/maps/api/geocode/json?address=${
        this.props.person.address
      }&key="SECRET_KEY`
    )
      .then(res => res.json())
      .then(data => {
        geoData = data.results[0].geometry.location;
        console.log(geoData); // {lat: 37.5397407, lng: 126.9895666}
      })
      .catch(err => console.log(err));
    this.setState({ geoLocation: geoData }, ()=>{console.log(state)});
  }
  render() {
    const person = this.props.person;
    const images = [
      <img key={0} alt="" src={person.imgURL} />,
      ...person.subImgURLs.map((url, index) => {
        return <img alt="" src={url} key={index + 1} />;
      })
    ];

    return (
      <PeopleInfoStyle>
        <Carousel>{images}</Carousel>
            {!this.state.getLocation ? null : (
                <GoogleMap
                  id="map"
                  option={{
                    center: {
                      lat: this.state.geoLocation.lat,
                      lng: this.state.geoLocation.lng
                    },
                    zoom: 8
                  }}
                  onMapLoad={map => {
                    const market = new window.google.maps.Marker({
                      position: {
                        lat: this.state.geoLocation.lat,
                        lng: this.state.geoLocation.lng
                      },
                      map: map,
                      title: "business"
                    });
                  }}
                />
        </PeopleInfoStyle>
    );
  }
}

export default PeopleInfo;

从“React”导入React；
从“../../../styles/presentational/PeopleInfoStyle”导入PeopleInfoStyle；
从“../../containers/Carousel/Carousel”导入旋转木马；
从“../../presentational/GoogleMap/GoogleMap”导入GoogleMap；
类PeopleInfo扩展了React.Component{
状态={}；
componentDidMount（）{
设geoData={}；
取回(
`https://maps.googleapis.com/maps/api/geocode/json?address=${
这个.props.person.address
}&key=“SECRET\u密钥`
)
.then（res=>res.json（））
。然后（数据=>{
geoData=data.results[0].geometry.location；
console.log（地理数据）；//{lat:37.5397407，lng:126.9895666}
})
.catch（err=>console.log（err））；
this.setState（{geoLocation:geoData}，（）=>{console.log（state）}）；
}
render（）{
const person=this.props.person；
常量图像=[
,
…person.subImgURLs.map（（url，索引）=>{
返回；
})
];
返回(
{图像}
{！this.state.getLocation？空：(
{
const market=new window.google.maps.Marker({
职位：{
lat:this.state.geoLocation.lat，
液化天然气：this.state.geoLocation.lng
},
地图：地图，
标题：“商业”
});
}}
/>
);
}
}
导出默认的PeopleInfo；

简短的回答是-状态不会随提取请求的响应而更新

一旦api请求完成，即在一个“then”回调内，状态必须更新

正如在上面的源代码中一样，setState是在promise之外调用的（在componentDidMount方法中），本质上是异步的promise不会在您进行调用并触发promise后立即完成，解释器将继续使用

geodata={}

调用setState

我希望您现在理解了

.then（（）=>{}）

的实用性。它们确保在承诺成功后执行某些代码

当您要访问状态时，请使用另一个指针

this.state

，因为它是实例属性，而

this

用于访问类内的那些属性

因此，带有回调的正确setState调用应该如下-

this.setState（{geolocation:geodata}，（）=>{console.log（this.state）}）

---

我希望这有帮助。

this.setState将在收到API响应之前被调用。因此geoData将是空对象{}。