React 钩子：当我们尝试调用函数时，useMemo 和 useEffect 有一个 Missing 依赖项

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 在定义之前使用 no-use-before-define

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 和 state 来运行，因为它可以从父级的范围中使用。

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，这就是它抱怨已声明函数的原因。

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

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。

希望这对你有用。