React Hook useEffect 依赖问题

Question

我在我的应用程序上收到一条警告消息，我尝试了很多方法来删除它，但都没有成功。错误信息：

React Hook useEffect has a missing dependency: 'updateUserData'. Either include it or remove the dependency array react-hooks/exhaustive-deps

我不想通过评论排除它以避免这个问题，但我想以 "best practices" 的方式修复它。

我想调用该更新程序函数并更新我的组件，这样我就可以在其他组件中共享该上下文。

所以...我做错了什么？（非常欢迎对其余部分进行任何代码审查！）

万分感谢！

如果我将 [] 添加为 useEffect 的第二个参数，我会收到警告，删除它会出现无限循环。

同时添加 [updateuserData] 会导致无限循环。

import React, { useState } from "react";
import UserContext from "./UserContext";


interface iProps {
    children: React.ReactNode
}

const UserProvider: React.FC<iProps> = (props) => {
    // practice details
    const [userState, setUserState] = useState({
        id'',
        name: ''
    });

    // practice skills
    const [userProfileState, setuserProfileState] = useState([]);

    // user selection
    const [userQuestionsState, setuserQuestionsState] = useState({});


    return (
        <UserContext.Provider value={{
            data: {
                user: userState,
                userProfile: userProfileState,
                questions: userQuestionsState
            },
            updateuserData: (id : string) => {
                 // call 3 services with axios in parallel
                 // update state of the 3 hooks
            }
        }}
        >
            {props.children}
        </UserContext.Provider>
    );
};

export default UserProvider;

const UserPage: React.FC<ComponentProps> = (props) => {


    const {data : {user, profile, questions}, updateUserData}: any = useContext(UserContext);

    useEffect(() => {
        // update information
        updateUserData("abcId")
    }, []);



    return <div>...</div>

}

思路如下：

我有上下文
我为该内容创建了提供商
上下文公开数据和更新函数
我在带有 useEffect 挂钩的组件中使用该提供程序，但收到警告
我想在提供程序中保留有关获取和更新上下文的所有逻辑，因此我不会在需要它的其他组件中复制它。

Answer 1

首先，无限循环是由于您的上下文正在更新，这导致您的组件被重新渲染，它正在更新您的上下文，这导致您的组件被重新渲染。添加依赖项应该可以防止此循环，但在您的情况下并不是因为当您的上下文更新时，将提供一个全新的 updateuserData ，因此 ref 相等性检查会检测到更改并在您不这样做时触发更新我不想这样。

一种解决方案是更改您在 UserProvider 中创建 updateUserState 的方式，例如使用useCallback 传递相同的函数，除非依赖项之一发生变化：

const UserProvider: React.FC<iProps> = (props) => {
  // practice details
  const [userState, setUserState] = useState({
      id'',
      name: ''
  });

  // practice skills
  const [userProfileState, setuserProfileState] = useState([]);

  // user selection
  const [userQuestionsState, setuserQuestionsState] = useState({});
  const updateuserData = useCallback(id=>{
    // call your services
  }, [userState, userProfileState, userQuestionsState])

  return (
      <UserContext.Provider value={{
          data: {
              user: userState,
              userProfile: userProfileState,
              questions: userQuestionsState
          },
          updateuserData
      }}
      >
          {props.children}
      </UserContext.Provider>
  );
};

React Hook useEffect 依赖问题

React Hook useEffect dependency issue

reactjs

react-hooks

react-context

use-effect