在useEffect内使用useSelector返回值触发无限循环该如何解决？

无限循环触发原因 #

你当前的useEffect同时包含了「发起用户数据请求」和「同步Redux数据到本地state」两个逻辑，且把currentUser加入了依赖数组，触发了链式更新：

1. 执行effect → 发起请求 → 请求成功后更新Redux中的currentUser
2. currentUser变化触发effect重新执行 → 再次发起请求 → 再次更新currentUser
3. 循环往复触发无限重渲染

修复方案 #

方案1：拆分两个独立useEffect #

将请求逻辑和数据同步逻辑拆分到两个独立的副作用中，避免互相触发：

const currentUser = useSelector((state) => state.userReducer.currentUser);

const [userInfo, setUserInfo] = useState({
  name: "",
  email: "",
});

// 副作用1：仅负责发起用户数据请求，仅在用户邮箱/ dispatch变化时触发
useEffect(() => {
  dispatch(getCurrentuserAction(user?.result?.email));
}, [dispatch, user?.result?.email]);

// 副作用2：仅负责同步Redux的currentUser到本地state，仅在currentUser变化时触发
useEffect(() => {
  if (currentUser) {
    setUserInfo(currentUser);
  }
}, [currentUser]);

方案2：移除冗余本地状态（可选） #

如果本地userInfo没有做额外的临时修改类的受控逻辑，可以直接使用从Redux取到的currentUser，不需要额外在组件内用useState存储一份，从根源上避免状态同步的问题。

内容的提问来源于stack exchange，提问作者Muhammad Hassaan Ather