2

何时设置值但缺少依赖项添加 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]);
4

2 回答 2

1

它会进入无限循环，因为每当您使用 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 方法

于 2020-10-17T10:23:13.677 回答
1

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

setFormData(formData => ({
  ...formData,
  firstName: data.firstName,
  lastName: data.lastName,
  email: data.email,
}));

然后你不需要放入formData依赖数组。

于 2020-10-17T09:32:37.140 回答