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'. Либо включите его, либо удалите массив зависимых реагирующих хуков / исчерпывающий deps

Когда я добавляю 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 предоставьте точные параметры чтобы его вызывали минимально согласно сценарию. Допустим, вы получаете доступ к value из состояния в triggerData. Тогда вы можете передать state.value вместо целого state.

Надеюсь, это сработает для вас.