reactjs - ShouldComponentUpdate 永远不会在子组件中调用

Question

我有两个组件。一个是父组件(连接到 redux 的智能组件)，另一个是在数组迭代中渲染的子组件。

每当从子组件分派(dispatch)某些 redux 操作时，存储中的状态就会更改，并且重新渲染整个元素列表，但我只想渲染实际状态已更改的子组件。就像在位置数组中一样，我想在特定位置显示加载程序，并且数组中的对象更新得很好，但是为什么 shouldComponentUpdate 在子元素中不可用，以便我可以决定它是否应该渲染。

父组件

import React                        from 'react';
import { connect }                  from 'react-redux';
import { createStructuredSelector } from 'reselect';

class Locations extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return this.props.locations.map((location) => 
    <Location
      toggleLocationStatusInfo={this.props.toggleLocationStatusInfo}
      location={location} />)
  }
}

const mapDispatchToProps = (dispatch) => ({
  fetchLocations: (data) => dispatch(actions.fetchLocations(data)),
  toggleLocationStatusInfo: dispatch(actions.toggleLocationStatusInfo()),
});

const mapStateToProps = createStructuredSelector({
  locations: selectors.getLocations(),
});

export default connect(mapStateToProps, mapDispatchToProps)(Locations);

子组件

import React from 'react';
class Location extends React.Component {
  constructor(props) {
    super(props);
  }

  shouldComponentUpdate() {
    // THIS METHOD IS NEVER CALLED EVEN THE TOGGLE ACTION IS
    // DISPATCHCED AND REDUX STATE IS CHANGED. IT IS CALLED FINE FINE
    // PARENT (Locations) COMPONENT BUT NOT HERE
  }

  render() {
    // render this.props.location content here
    // One of my anchor calls onClick={this.props.toggleLocationStatusInfo}
  }
}

Location.propTypes = {
  location: React.PropTypes.object
  toggleLocationStatusInfo: React.PropTypes.func,
}

我怎样才能找出为什么在子进程中没有调用shouldComponentUpdate？

Answer 1

我忘记在每个组件上添加唯一的键，因此每次都只是创建新的子组件。

在位置上添加关键 Prop 后，效果很好。