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

时间:2017-07-07 14:24:54

标签: javascript reactjs redux react-redux

在我的理解水平上,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);

2 个答案:

答案 0 :(得分:4)

只要propsstate更改,您的组件就会重新呈现。这是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),
        },
      });
    }
  }
}

答案 1 :(得分:0)

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