反应钩子 :useMemo 和 useEffect 在我们尝试调用函数时有一个缺失的依赖项

Question

triggerData函数用于多个函数。因此，如果我将函数放在useEffect内以避免缺少依赖项，那么我就不能在useEffect之外调用triggerData，即buildData。如何避免缺少依赖项错误？

useEffect(()=>{
//api call
if(something){
triggerData(state, props);
}
}[values]);
const triggerData = (state, props) => {
return values + 1;
}
const buildData = () => {
triggerData(state, props);
}

React Hook useEffect有一个缺失的依赖项："triggerData"。要么包含它，要么删除依赖数组 react-hooks/exhaustive-deps

当我在useEffect中添加triggerData时，出现以下错误。triggerData在定义之前已使用 在定义之前不使用

useEffect(()=>{
//api call
const triggerData = (values) => {
return values + 1;
}
if(something){
triggerData(values);
}
}[values, triggerData]);
const buildData = () => {
triggerData(values);
}

Answer 1

如果你想在useEffect之外使用triggerData，你可以使用另一个叫做useCallback的钩子。

您无需传递 props 和状态即可运行，因为它可以从父级的范围中获得。

const triggerData = useCallback(() => {
return values + 1;
}, [ /* pass required depedencies here */])
useEffect(()=>{
//api call
if(something){
triggerData(); // don't pass state and props here
}
}[values, triggerData]);
const buildData = () => {
triggerData(); // dont pass state and props here
}

Answer 2

如果您仅在钩子内部使用triggerData，那么我更喜欢在useEffect钩子中声明该函数。喜欢：

useEffect(()=>{
//api call
const triggerData = (values) => {
return values + 1;
}
if(something){
triggerData(values);
}
}, [values]);

你错过了一些东西。你在钩子里声明triggerData并将其传递给useEffect这就是为什么它抱怨已经声明的功能。

如果你真的想在外面声明triggerDatauseEffect在其他地方使用它，你可以这样做：

useEffect(()=>{
//api call
if(something){
triggerData(state, props);
}
}, [values, triggerData]);
const triggerData = useCallback((state, props) => {
return values + 1;
}, [state, props]);

const buildData = () => {
triggerData(state, props);
}

在使用中useCallback提供准确的参数，以便根据方案将其调用最少。比方说，您正在从triggerData的状态访问value。然后你可以传递state.value而不是整个state。

希望这对你有用。