Question

在我的理解水平上，React doc对我来说很不清楚。

我应该在这里使用什么循环方法而不是componentDidMount（）？我希望此组件每次从state.selectedShopInfo获得新状态时都会更新Google地图。

在我的应用中，用户点击了一些列表，每次点击此组件都会获得新数据。

我正在使用console.log(_.last(this.props.selectedShopInfo));进行检查，它正在运行。

那么我应该使用什么样的React循环方法，所以每次 { selectedShopInfo: state.selectedShopInfo }都会改变GoogleMap Component也会改变？

    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);

Answer 1

只要props或state更改，您的组件就会重新呈现。这是React组件的默认行为。

所以你的组件会重新渲染，但componentWillMount中的逻辑不会被多次应用。

要解决此问题，请将该逻辑移至单独的函数，并在componentDidMount()和componentDidUpdate()中调用该逻辑。像这样：

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),
        },
      });
    }
  }
}

Answer 2

您最初应在componentDidMount内渲染地图，并在componentWillReceiveProps中更新地图。

当redux状态发生变化时，我应该使用哪种React循环方法重新渲染组件？

2 个答案: