已配置useEffect依赖仍出现Redux dispatch触发无限重渲染问题

问题根因 #

你出现无限循环的核心原因是：receiveProfileOwner action 触发 Redux Store 更新时，对应 users[userId] 返回了新的对象引用，即使对象内的属性值和之前完全一致，也会导致 mapStateToProps 返回的 profileOwner 引用发生变化。useEffect 检测到依赖项更新后会重新调用 getProfileInfo，进而再次触发接口请求、Store 更新、组件重渲染的流程，形成无限循环。

解决方案 #

方案1（最推荐）：将useEffect依赖替换为用户ID #

你需要重新拉取用户数据的触发时机本质是「访问的用户ID发生变化」，而非profileOwner对象变化，直接使用路由参数中的userId作为依赖即可从根源规避循环问题：

1. 先在mapStateToProps中新增userId字段传递给组件：

const mapStateToProps = ({ session, users }, ownProps) => ({
  currentUser: users[session.id],
  profileOwner: users[ownProps.params.userId],
  isMine: session.id === parseInt(ownProps.params.userId),
  userId: ownProps.params.userId
});

2. 修改Profile组件的useEffect依赖：

const Profile = ({ currentUser, profileOwner, getProfileInfo, isMine, userId }) => {
  useEffect(() => {
    getProfileInfo();
  }, [userId]);

  return (stuff)
}

userId是基本类型值，只要路由中的用户ID不变就不会重复触发effect，切换用户时ID变化会自动拉取新数据，完全符合你的需求。

方案2：优化Reducer更新逻辑 #

如果你需要保留profileOwner作为依赖项，可以在Reducer处理receiveProfileOwner时增加新旧数据对比，数据无变化时返回旧对象引用即可：

// 处理RECEIVE_PROFILE_OWNER的Reducer逻辑示例
case RECEIVE_PROFILE_OWNER:
  const existingUser = state[action.payload.id];
  // 浅对比新旧用户数据，属性完全一致则返回旧state不更新引用
  if (existingUser && Object.entries(action.payload).every(([key, value]) => existingUser[key] === value)) {
    return state;
  }
  // 若用户数据包含嵌套对象，可替换为深比较方法判断数据是否相等
  return {
    ...state,
    [action.payload.id]: action.payload
  };

可选优化：优化mapDispatchToProps写法 #

你当前使用函数式的mapDispatchToProps，每次组件重渲染都会生成新的getProfileInfo函数引用，如果后续需要将其加入useEffect依赖项，推荐改成对象式写法，react-redux会自动生成稳定的函数引用：

const mapDispatchToProps = {
  getProfileInfo
};

组件内调用时直接传入userId即可：getProfileInfo(userId)。

内容的提问来源于stack exchange，提问作者KGE