时间戳

首页 > 解决方案 > React Hook useEffect 缺少依赖项：'formData'。包括它或删除依赖数组。什么是依赖是使用

javascript - React Hook useEffect 缺少依赖项：'formData'。包括它或删除依赖数组。什么是依赖是使用

问题描述

何时设置值但缺少依赖项添加 formData 依赖项然后将进入无限循环

  useEffect(() => {
    if (id !== 0) {
        profileByID(id).then((res) => {
            const data = res.data.result;
            setTimeout(() => {
                setFormData({
                    ...formData,
                    firstName: data.firstName,
                    lastName: data.lastName,
                    email: data.email,
                });
                setbirthDate(new Date(data.birthDate));
            }, 1000);
        });
    }
    console.log(true);
  }, [id, profileByID]);

标签： javascriptreactjs

解决方案

它会进入无限循环，因为每当您使用 setFormData 更新表单值时，它都会触发渲染，而渲染又会再次调用 useEffect 方法。发生这种情况是因为您每次使用 setFormData 都在设置一个新对象。

让 obj={a: 1,b:2}

obj==={...,a:1} //假

即它们不一样，所以像这样设置 setFormData 总是会导致重新渲染并导致无限循环。这只是 useFormData 如何在幕后比较数据的基本说明。因此，要解决此问题，请对所有不同的事物使用不同的 useState 示例

const[firstName, setFirstName]= useState('')

const[lastName, setLastName]= useState('')

const[email, setEmail]= useState('')

等等..

或者如果有大量数据，请使用 useReducer 方法，有很多博客可以从其中通过 useReducer 方法

推荐阅读