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 方法