Javascript 当redux状态发生变化时，我应该使用哪个React cycle方法来重新渲染组件？

不幸的是，在我的理解水平上，React博士对我来说并不清楚

我应该在这里使用什么循环方法而不是componentDidMount（）？我希望此组件在每次从

状态获取新状态时更新Google地图。selectedShopInfo

在我的应用程序中，用户单击某个列表，每次单击该组件时，都会获得新数据

我正在用

console.log（u.last（this.props.selectedShopInfo））检查它并且它正在工作

那么，每次
{selectedShopInfo:state.selectedShopInfo}
都会改变
谷歌地图组件
也会改变，我应该使用什么反应周期方法

    import _ from 'lodash';
    import React, { Component } from 'react';
    import { connect } from 'react-redux';

    class GoogleMap extends Component {
      componentDidMount() {
        const lastSelectedShopInfo = _.last(this.props.selectedShopInfo);
        if (lastSelectedShopInfo !== undefined) {
          new google.maps.Map(this.refs.map, {
            zoom: 20,
            center: {
              lat: Number(lastSelectedShopInfo.latitude),
              lng: Number(lastSelectedShopInfo.longitude),
            },
          });
        }
      }

      render() {
        console.log(_.last(this.props.selectedShopInfo));
        return (
          <div>
            <hr />
            <div className="google-map" ref="map" />
            <hr />
          </div>
        );
      }
    }

    function mapStateToProps(state) {
      return { selectedShopInfo: state.selectedShopInfo };
    }

    export default connect(mapStateToProps)(GoogleMap);

从“lodash”导入；
从“React”导入React，{Component}；
从'react redux'导入{connect}；
类GoogleMap扩展组件{
componentDidMount（）{
const lastSelectedShopInfo=\ uu.last（this.props.selectedShopInfo）；
如果（lastSelectedShopInfo！==未定义）{
新的google.maps.Map（this.refs.Map{
缩放：20，
中心：{
lat：编号（lastSelectedShopInfo.latitude），
lng：编号（lastSelectedShopInfo.longitude），
},
});
}
}
render（）{
log（u.last（this.props.selectedShopInfo））；
返回(


);
}
}
函数MapStateTops（状态）{
返回{selectedShopInfo:state.selectedShopInfo}；
}
导出默认连接（MapStateTops）（谷歌地图）；

您应该首先在

componentDidMount

中渲染贴图，然后在

componentWillReceiveProps

中更新贴图。您的组件将在

props

或

状态发生更改时重新渲染。这是React组件的默认行为

因此，您的组件将重新呈现，但您在
componentWillMount
中的逻辑不会被应用多次

要解决这个问题，请将该逻辑移到一个单独的函数中，并在
componentDidMount（）
和
componentdiddupdate（）中调用它。大概是这样的：

componentDidMount() {
  this.mapsInit();
}

componentDidUpdate(prevProps) {
  if (JSON.stringify(this.props) !== JSON.stringify(prevProps)) {
    this.mapsInit();
  }
}

mapsInit() {
  const lastSelectedShopInfo = _.last(this.props.selectedShopInfo);
    if (lastSelectedShopInfo !== undefined) {
      new google.maps.Map(this.refs.map, {
        zoom: 20,
        center: {
          lat: Number(lastSelectedShopInfo.latitude),
          lng: Number(lastSelectedShopInfo.longitude),
        },
      });
    }
  }
}

哇，这完全解决了我的问题！魔术非常感谢你！我当然会，但我必须等2分钟才能做到！嗯，将逻辑放入
组件willreceiveprops
将触发
render（）
之前的逻辑，该逻辑可能会也可能不会将更新的映射“替换”为“新的”
div
。不确定这是否有效。但即使是这样，只要React完成了重新渲染，就可以更安全地执行该逻辑。@Chris Fair point，我只是认为当Redux商店的道具发生变化时，作者想要使用生命周期方法。另外，据我所知，无论是在渲染之前还是之后执行，都不重要，因为div将从上一次渲染中重新使用。是的，除非我们重新订购同级组件或其他东西，否则一切都不会发生。