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

Question

triggerData函数用于多个函数。 因此，如果我将函数放在useEffect以避免丢失依赖项，那么我不能在triggerData之外调用useEffect即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

当我在triggerData中添加triggerData时， useEffect以下错误。 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

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

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

你错过了一些东西。 我们在钩子内声明triggerData并将其传递给useEffect这就是为什么它抱怨函数已经声明。

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

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 state 访问value 。 然后你可以传递state.value而不是整个state 。

希望这对你有用。

Answer 2

如果您想在 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
}