状态未使用api响应数据更新

Question

我的状态当前包含UserInfo，我要使用我正在从api调用中接收的数据进行设置。我已经在下面的以下代码中完成了此操作，但是状态尚未设置，我无法完全确定原因。

我的代码；

export class GoogleMaps extends Component {
  state = {
    UserInfo: null
  };

  componentDidMount() {
    var self = this
    axios
      .get(`https://jsonplaceholder.typicode.com/users`)
      .then(response => {
        console.log(response);
        self.setState({ UserInfo: response.data });
      })
      .catch(function(error) {
        console.log(error);
      });
      console.log(this.state);
    }

  render() {
    const { UserInfo } = this.state;
    if (!UserInfo) {
      return <div>Loading Map...</div>;
    }
    return (
      <Map google={this.props.google} zoom={5}>
        {this.state.UserInfo.map(User => (
          <Marker
            key={User.id}
            position={{ lat: User.latitude, lng: User.longitude }}
          />
        ))}
      </Map>
    );
  }
}



export default GoogleApiWrapper({
  apiKey: "key"
})(GoogleMaps);

我目前没有任何错误，这可能是什么问题？任何帮助或建议，将不胜感激。