您必须在componentDidUpdate方法中添加条件。

该示例fast-deep-equal用于比较对象。

import equal from 'fast-deep-equal'

...

constructor(){
  this.updateUser = this.updateUser.bind(this);
}  

componentDidMount() {
  this.updateUser();
}

componentDidUpdate(prevProps) {
  if(!equal(this.props.user, prevProps.user)) // Check if it's a new user, you can also use some unique property, like the ID  (this.props.user.id !== prevProps.user.id)
  {
    this.updateUser();
  }
} 

updateUser() {
  if (this.props.isManager) {
    this.props.dispatch(actions.fetchAllSites())
  } else {
    const currentUserId = this.props.user.get('id')
    this.props.dispatch(actions.fetchUsersSites(currentUserId))
  }  
}

使用钩子 (React 16.8.0+)

import React, { useEffect } from 'react';

const SitesTableContainer = ({
  user,
  isManager,
  dispatch,
  sites,
}) => {
  useEffect(() => {
    if(isManager) {
      dispatch(actions.fetchAllSites())
    } else {
      const currentUserId = user.get('id')
      dispatch(actions.fetchUsersSites(currentUserId))
    }
  }, [user]); 

  return (
    return <SitesTable sites={sites}/>
  )

}

如果您要比较的props是对象或数组，则应使用useDeepCompareEffect代替useEffect。

ComponentWillReceiveProps()由于错误和不一致，将来会被弃用。在 props 更改时重新渲染组件的另一种解决方案是使用ComponentDidUpdate()和ShouldComponentUpdate()。

ComponentDidUpdate()每当组件更新时调用，并且如果ShouldComponentUpdate()返回 true（如果ShouldComponentUpdate()未定义，则true默认返回）。

shouldComponentUpdate(nextProps){
    return nextProps.changedProp !== this.state.changedProp;
}

componentDidUpdate(props){
    // Desired operations: ex setting state
}

ComponentDidUpdate()通过在其中包含条件语句，可以仅使用该方法来完成相同的行为。

componentDidUpdate(prevProps){
    if(prevProps.changedProp !== this.props.changedProp){
        this.setState({          
            changedProp: this.props.changedProp
        });
    }
}

如果试图在没有条件或没有定义ShouldComponentUpdate()组件的情况下设置状态将无限重新渲染

您可以使用KEY随props更改的唯一键（数据的组合），并且该组件将使用更新的props重新呈现。

componentWillReceiveProps(nextProps) { // your code here}

我认为这就是您需要的活动。componentWillReceiveProps每当你的组件通过 props 接收到一些东西时就会触发。从那里你可以进行检查，然后做任何你想做的事情。

我建议看看我的这个答案，看看它是否与你正在做的事情有关。如果我理解你真正的问题，那就是你没有正确使用你的异步操作并更新 redux “store”，它会自动用它的新props更新你的组件。

代码的这一部分：

componentDidMount() {
      if (this.props.isManager) {
        this.props.dispatch(actions.fetchAllSites())
      } else {
        const currentUserId = this.props.user.get('id')
        this.props.dispatch(actions.fetchUsersSites(currentUserId))
      }  
    }

不应在组件中触发，应在执行第一个请求后处理。

看一下来自redux-thunk 的这个例子：

function makeASandwichWithSecretSauce(forPerson) {

  // Invert control!
  // Return a function that accepts `dispatch` so we can dispatch later.
  // Thunk middleware knows how to turn thunk async actions into actions.

  return function (dispatch) {
    return fetchSecretSauce().then(
      sauce => dispatch(makeASandwich(forPerson, sauce)),
      error => dispatch(apologize('The Sandwich Shop', forPerson, error))
    );
  };
}

您不一定必须使用 redux-thunk，但它会帮助您推理这样的场景并编写匹配的代码。