React Hook useEffect缺失依赖问题求助：传递Redux数据时触发警告

问题代码 #

const initState = {
    newAttribs: { ...props.state.Auth },
};

const [userList, setUserList] = useState(initState);

useEffect(() => {
    setUserList({ ...userList, newAttribs: { ...props.state.Auth } });
}, [props.state.Auth]);

console.log("userList now", userList);

控制台警告 #

WARNING in [eslint]
src\pages\Login.jsx
  Line 15:6:  React Hook useEffect has a missing dependency: 'userList'. Either include it or remove the dependency array. You can also do a functional update 'setUserList(u => ...)' if you only need 'userList' in the 'setUserList' call  react-hooks/exhaustive-deps

问题原因 #

你在useEffect回调里用到了userList本地状态变量，但未将其加入依赖数组，违反了ESLint的react-hooks/exhaustive-deps规则——该规则要求所有在useEffect中使用的外部变量必须声明为依赖。

如果直接把userList加入依赖数组，会触发无限循环：每次setUserList更新userList后，依赖数组变化会再次触发useEffect，进而再次更新userList，循环往复。

解决方案 #

方案1：使用函数式更新（推荐） #

利用setUserList的函数式更新特性，基于上一次的状态快照进行更新，无需依赖当前userList变量：

useEffect(() => {
    // 通过prevState获取最新状态快照，无需将userList加入依赖
    setUserList(prevState => ({ 
        ...prevState, 
        newAttribs: { ...props.state.Auth } 
    }));
}, [props.state.Auth]); // 仅依赖Redux传来的Auth数据

这种方式既满足ESLint依赖规则，又不会触发无限循环，是状态依赖更新的标准做法。

方案2：移除本地状态，直接使用Redux数据 #

如果组件仅同步Redux中的Auth数据到本地状态，无额外本地修改逻辑，可直接使用props.state.Auth，省去同步步骤：

// 删除useState和useEffect，直接使用props中的Redux数据
console.log("user data", props.state.Auth);

这种方式更简洁，避免冗余的状态同步逻辑，从根源上消除依赖警告。

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