Question

我有两个组成部分。一个是父（连接到redux的智能组件），另一个是在数组迭代中呈现的子组件。

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

父组件

this.player = new window['YT'].Player('player', {
    videoId: this.mediaid,
    width:'100%',
    playerVars: { 'autoplay': 1, 'controls': 0,'autohide':1,'wmode':'opaque','origin':'http://localhost:8100' },
}

子组件

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

如何找出未在儿童中调用shouldComponentUpdate的原因？

Answer 1

我忘了在每个组件上添加一个唯一键，所以每次只创建新的孩子。

在位置上添加关键支柱后，它运行良好。

Answer 2

如果您从react-router使用Route并传递内联函数而不是组件，则会发生相同的问题，

问题

<Route
  path="/decrement"
  component={() => (
    <Decrement decrementBy={decrementBy} isLoading={isLoading} />
  )}
/>

解决方案

<Route
  path="/decrement"
  render={() => (
    <Decrement decrementBy={decrementBy} isLoading={isLoading} />
  )}
/>

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

2 个答案: