如何在React useEffect钩子中正确更新formData的userId属性？解决依赖缺失与无限循环问题

这是个很常见的React Hook使用坑，我来帮你搞定它！

你遇到的核心矛盾是：直接把formData加入依赖数组会触发无限循环，不加入又会收到React的依赖警告。解决方案正是警告里提示的函数式更新，具体写法如下：

正确的useEffect实现 #

useEffect(() => {
  if(userData.userId !== ""){
    // 使用函数式更新，接收前一次状态作为参数
    setFormData(prevFormData => ({
      ...prevFormData,
      userId: userData.userId
    }));
  }
}, [userData]); // 仅依赖userData，无需添加formData

为什么这个方案能解决问题？ #

• 函数式更新setFormData(prevFormData => ...)让我们不需要直接引用当前的formData状态，而是通过React传递的prevFormData（更新前的状态快照）来构建新状态。这样既满足了React的依赖检查规则，又避免了把formData加入依赖数组。
• 依赖数组里只保留userData，只有当userData发生变化时，这个effect才会执行，不会因为formData的更新触发重复执行，彻底解决了"Maximum update depth exceeded"的无限循环问题。

额外优化：初始化时直接赋值（可选） #

如果你的userData在组件初始化时就已经有值，并且只需要在初始化阶段设置formData的userId，那你甚至可以不用useEffect，直接在useState里用函数初始化：

const userData = useSelector(state => state.userData);
const [formData, setFormData] = useState(() => ({ 
  userId: userData.userId || '', 
  name: '', 
  email: '' 
}));

不过这个方案只适用于初始化场景，如果userData后续还会动态更新，那还是需要上面的useEffect函数式更新方案。

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