React Hook useEffect依赖问题

Question

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

React Hook useEffect缺少一个依赖项："updateUserData"。 要么包含它，要么删除依赖项数组 反应钩子/穷举部门

我不想通过评论来排除它以避免这个问题，但我想以"最佳实践"的方式修复它。

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

那么......我做错了什么？(非常欢迎任何关于其余部分的代码审查！

谢谢一百万！

如果我添加 [] 作为 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>
);
};