如何更新react钩子中的初始值(几个数据)

Question

我创建了一个函数来设置值数据当前用户loggedin并在useEffect中调用它后，收到了一条警告消息。这是代码：

import React, { useEffect, useState } from "react";
...
const AddPost = () => {
const userStorage = sessionStorage.getItem('user');
const [values, setValues] = useState({
userId: '',
authorName: '',
title: '',
content: '',
likes: '',
dislikes: ''
});
useEffect(() => {
getCurrentUserInfo();
},[]);
const getCurrentUserInfo = () => {
if(userStorage !== null) {
setValues({
...values,
userId: userStorage.id,
authorName: userStorage.userName,
})
}
}
...
export default AddPost;

我只想从用户登录的数据中设置userId和authorName，所以在函数setValues中我得到所有的初始值，然后只更新userId和authorName。突然，我的浏览器控制台里出现了一条警告信息，上面写着

React Hook useEffect has a missing dependency: 'getCurrentUserInfo'. Either include it or remove the dependency array

我试图在useEffect中删除[]，但这会导致浏览器滞后，因为useEffect会循环调用函数。我尝试在[]中添加values和userStorage或其中一个，但仍未成功。对此有什么解决方案吗？

Answer 1

始终建议在数组中添加useEffect钩子所需的所有依赖项，在您的情况下，它是getCurrentUserInfo函数，这就是它显示警告的原因。

为了避免这种情况，您可以在useEffect挂钩中定义getCurrentUserInfo，而不将其作为依赖项提供。您还可以使用回调模式来更新状态，以避免将值作为依赖项，并且您仍然需要将userStorage作为依赖项提供。对于userStorage，您可以使用useMemo来存储该值，这样就不会导致重新发送。

const userStorage = useMemo(() => sessionStorage.getItem('user'), [sessionStorage]);
useEffect(() => {
const getCurrentUserInfo = () => {
if(userStorage !== null) {
setValues(values => ({
...values,
userId: userStorage.id,
authorName: userStorage.userName,
}))
}
}
getCurrentUserInfo();
},[userStorage]);

Answer 2

useEffect(() => {
getCurrentUserInfo();
},[getCurrentUserInfo]);

您应该在依赖数组中添加函数。但请注意，如果您不将它添加到数组中，它将只运行一次，那么这是不必要的。当你将它添加到数组中时，它将在函数更新时运行，在这种情况下，它将是一次。

react官方文件：

如果使用此优化，请确保数组包含组件范围内随时间变化并由效果使用的所有值(如道具和状态(。

Answer 3

[SOLVE]

我想回答我的问题，如何更新几个数据，并删除循环调用函数，因为useEffect。因此，对于第一个，我删除了函数，只在useEffect中设置值。

useEffect(() => {
if(userStorage !== null) {
setValues({
...
})
}
},[]);

在setValues中，我像这样放置

setValues(values => ({
...values,
userId: userStorage.id,
authorName: userStorage.userName,
}))

那么最后的代码就像这个

useEffect(() => {
if(userStorage !== null) {
setValues(values => ({
...values,
userId: userStorage.id,
authorName: userStorage.userName,
}))
}
},[]);