时间戳

首页 > 解决方案 > 如何更新 react-hooks 中的初始值（几个数据）？

javascript - 如何更新 react-hooks 中的初始值（几个数据）？

问题描述

在我创建了一个函数来设置当前用户登录的值数据并在 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

我尝试删除[]in useEffect，但这会导致我的浏览器滞后，因为useEffect执行循环调用函数。我尝试在里面添加values和userStorage/或其中之一[]，仍然没有成功。有什么解决方案吗？

标签： javascriptreactjsreact-hooksuse-effect

解决方案

始终建议在 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]);

推荐阅读