React :当我们试图调用一个函数时，useMemo和useEffect缺少一个依赖项

Question

triggerData函数用于多个函数中。因此，如果我将函数放置在useEffect中以避免缺少依赖项，那么我就不能在useEffect之外调用triggerData --也就是说，buildData.How --我能避免缺少依赖项错误吗？

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

const triggerData = (state, props) => {
  return values + 1;
}

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

React缺少一个依赖项：'triggerData‘。要么包含它，要么删除依赖数组react/react。

当我在triggerData中添加useEffect时，会得到以下错误。triggerData 在定义为“不使用-先定义”之前使用。

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

    const buildData = () => {
      triggerData(values);
    }

Answer 1

如果您想在triggerData之外使用useEffect，可以使用另一个名为useCallback的钩子。

您不需要传递道具和状态来发挥作用，因为它将从父级的作用域中获得。

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，这就是为什么它抱怨已经声明的函数。

如果您真的想在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中的状态访问triggerData。然后您可以传递state.value而不是整个state。

希望这对你有用。