React Hook useEffect 缺少依赖项：“formData”。包括它或删除依赖项数组。

Question

当设置值但缺少依赖项时，将 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]);

Answer 1

解决方法是将其转换为功能更新：

setFormData(formData => ({

  ...formData,

  firstName: data.firstName,

  lastName: data.lastName,

  email: data.email,

}));

那么你不需要放入formData依赖数组。

Answer 2

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

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

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

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

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

常量[lastName, setLastName]= useState('')

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

等等..

或者如果有大量数据，则使用 useReducer 方法，有很多博客，您可以从中浏览 useReducer 方法