Как исправить отсутствующее предупреждение о зависимости при использовании useEffect React Hook

Эта статья является хорошим пособием по извлечению данных с помощью хуков: https://www.robinwieruch.de/react-hooks-fetch-data/.

По сути, включите определение функции выборки внутри useEffect:

useEffect(() => {
  const fetchBusinesses = () => {
    return fetch("theUrl"...
      // ...your fetch implementation
    );
  }

  fetchBusinesses();
}, []);

./src/components/BusinessesList.js
Line 51:  React Hook useEffect has a missing dependency: 'fetchBusinesses'.
Either include it or remove the dependency array  react-hooks/exhaustive-deps

Это не ошибка JavaScript/React, а предупреждение ESLint (eslint-plugin-react-hooks).

Он говорит вам, что хук зависит от функции fetchBusinesses, поэтому вы должны передать его как зависимость.

useEffect(() => {
  fetchBusinesses();
}, [fetchBusinesses]);

Это может привести к вызову функции при каждом рендеринге, если функция объявлена ​​в компоненте, например:

const Component = () => {
  /*...*/

  // New function declaration every render
  const fetchBusinesses = () => {
    fetch('/api/businesses/')
      .then(...)
  }

  useEffect(() => {
    fetchBusinesses();
  }, [fetchBusinesses]);

  /*...*/
}

потому что каждый раз функция переопределяется с новой ссылкой.

Правильный способ сделать это:

const Component = () => {
  /*...*/

  // Keep the function reference
  const fetchBusinesses = useCallback(() => {
    fetch('/api/businesses/')
      .then(...)
  }, [/* Additional dependencies */])

  useEffect(() => {
    fetchBusinesses();
  }, [fetchBusinesses]);

  /*...*/
}

Или просто определите функцию в useEffect.

Подробнее: [ESLint] Отзыв о правиле lint 'exhaustive-deps' #14920

Если вы не используете метод fetchBusinesses нигде, кроме эффекта, вы можете просто переместить его в эффект и избежать предупреждения

useEffect(() => {
    const fetchBusinesses = () => {
       return fetch("theURL", {method: "GET"}
    )
      .then(res => normalizeResponseErrors(res))
      .then(res => {
        return res.json();
      })
      .then(rcvdBusinesses => {
        // some stuff
      })
      .catch(err => {
        // some error handling
      });
  };
  fetchBusinesses();
}, []);

Однако, если вы используете fetchBusinesses вне рендеринга, вы должны обратить внимание на две вещи.

1. Есть ли проблема с передачей нетfetchBusinesses в качестве метода, когда он используется во время монтирования с закрывающим закрытием?
2. Зависит ли ваш метод от некоторых переменных, которые он получает от замыкания? Это не ваш случай.
3. При каждом рендеринге fetchBusinesses будет создаваться заново, поэтому передача его в useEffect вызовет проблемы. Итак, сначала вы должны запомнить fetchBusinesses, если хотите передать его в массив зависимостей.

Подводя итог, я бы сказал, что если вы используете fetchBusinesses вне useEffect, вы можете отключить правило, используя // eslint-disable-next-line react-hooks/exhaustive-deps, в противном случае вы можете переместить метод внутрь useEffect.

Чтобы отключить правило, вы должны написать его как

useEffect(() => {
   // other code
   ...

   // eslint-disable-next-line react-hooks/exhaustive-deps
}, []) 

Просто отключите ESLint для следующей строки;

useEffect(() => {
   fetchBusinesses();
// eslint-disable-next-line
}, []);

Таким образом, вы используете его так же, как компонент, который монтируется (вызывается один раз).

обновлен

или

const fetchBusinesses = useCallback(() => {
 // Your logic in here
 }, [someDeps])

useEffect(() => {
   fetchBusinesses();
// No need to skip the ESLint warning
}, [fetchBusinesses]);

fetchBusinesses будет вызываться каждый раз при изменении некоторые Депсы.

Вы можете удалить второй массив типов аргументов [], но fetchBusinesses() также будет вызываться при каждом обновлении. Вы можете добавить оператор IF в реализацию fetchBusinesses(), если хотите.

React.useEffect(() => {
  fetchBusinesses();
});

Другой — реализовать функцию fetchBusinesses() вне вашего компонента. Просто не забудьте передать любые аргументы зависимостей вашему вызову fetchBusinesses(dependency), если они есть.

function fetchBusinesses (fetch) {
  return fetch("theURL", { method: "GET" })
    .then(res => normalizeResponseErrors(res))
    .then(res => res.json())
    .then(rcvdBusinesses => {
      // some stuff
    })
    .catch(err => {
      // some error handling
    });
}

function YourComponent (props) {
  const { fetch } = props;

  React.useEffect(() => {
    fetchBusinesses(fetch);
  }, [fetch]);

  // ...
}

Решение также дается React. Они советуют вам использовать useCallback, который вернет версию вашей функции запоминать:

The 'fetchBusinesses' function makes the dependencies of the useEffect Hook (at line NN) change on every render. To fix this, wrap the 'fetchBusinesses' definition into its own useCallback() Hook react-hooks/exhaustive-deps

useCallback прост в использовании, так как имеет ту же подпись, что и useEffect. Разница в том, что useCallback возвращает функцию. Это будет выглядеть так:

 const fetchBusinesses = useCallback( () => {
        return fetch("theURL", {method: "GET"}
    )
    .then(() => { /* Some stuff */ })
    .catch(() => { /* Some error handling */ })
  }, [/* deps */])
  // We have a first effect that uses fetchBusinesses
  useEffect(() => {
    // Do things and then fetchBusinesses
    fetchBusinesses();
  }, [fetchBusinesses]);
   // We can have many effects that use fetchBusinesses
  useEffect(() => {
    // Do other things and then fetchBusinesses
    fetchBusinesses();
  }, [fetchBusinesses]);

Редактировать 20.09.2021

There are very good options for state management libs if you are creating a new app or have enough flexibility. Check out Recoil.

Просто для полноты:

1. (Перестал работать) Использовать функцию как обратный вызов useEffect

useEffect(fetchBusinesses, [])

2. Объявить функцию внутри useEffect()

useEffect(() => {
  function fetchBusinesses() {
    ...
  }
  fetchBusinesses()
}, [])

3. Запоминай с useCallback()

В этом случае, если у вас есть зависимости в вашей функции, вам придется включить их в массив зависимостей useCallback, и это снова вызовет useEffect, если параметры функции изменятся. Кроме того, это много шаблонного... Так что просто передайте функцию прямо в useEffect, как в 1. useEffect(fetchBusinesses, []).

const fetchBusinesses = useCallback(() => {
  ...
}, [])
useEffect(() => {
  fetchBusinesses()
}, [fetchBusinesses])

4. Аргумент функции по умолчанию

As suggested by https://stackoverflow.com/a/61183162/5552686

useEffect((fetchBusinesses = fetchBusinesses) => {
   fetchBusinesses();
}, []);

5. Создайте собственный хук

Создайте собственный хук и вызывайте его, когда вам нужно запустить функцию только один раз. Может быть чище. Вы также можете вернуть обратный вызов для сброса повторного запуска «инициализации», когда это необходимо.

// customHooks.js
const useInit = (callback, ...args) => {
  const [mounted, setMounted] = useState(false)
  
  const resetInit = () => setMounted(false)

  useEffect(() => {
     if (!mounted) {
        setMounted(true);
        callback(...args);
     }
  },[mounted, callback]);

  return [resetInit]
}

// Component.js
return ({ fetchBusiness, arg1, arg2, requiresRefetch }) => {
  const [resetInit] = useInit(fetchBusiness, arg1, arg2)

  useEffect(() => {
    resetInit()
  }, [requiresRefetch, resetInit]);

6. Отключить предупреждение eslint

Disabling warnings should be your last resort, but when you do, better do it inline and explicitly, because future developers may be confused or create unexpected bugs without knowing linting is off

useEffect(() => {
  fetchBusinesses()
}, []) // eslint-disable-line react-hooks/exhaustive-deps

Исходный ответ

Вы можете установить его непосредственно как обратный вызов useEffect:

useEffect(fetchBusinesses, [])

Он сработает только один раз, поэтому убедитесь, что все зависимости функции установлены правильно (так же, как при использовании componentDidMount/componentWillMount...).

Эти предупреждения очень полезны для поиска компонентов, которые не обновляются последовательно: Безопасно ли исключать функции из списка зависимостей?.

Однако, если вы хотите удалить предупреждения по всему проекту, вы можете добавить это в свою конфигурацию ESLint:

  {
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/exhaustive-deps": 0
    }
  }

На самом деле предупреждения очень полезны при разработке с помощью хуков. Но в некоторых случаях это может вас уколоть. Особенно, когда вам не нужно прослушивать изменение зависимостей.

Если вы не хотите помещать fetchBusinesses в зависимости хука, вы можете просто передать его в качестве аргумента обратному вызову хука и установить основной fetchBusinesses в качестве значения по умолчанию для него следующим образом:

useEffect((fetchBusinesses = fetchBusinesses) => {
   fetchBusinesses();
}, []);

Это не лучшая практика, но в некоторых случаях это может быть полезно.

Кроме того, как Шубхам написал, вы можете добавить приведенный ниже код, чтобы указать ESLint игнорировать проверку вашего хука.

// eslint-disable-next-line react-hooks/exhaustive-deps

const [mount, setMount] = useState(false)
const fetchBusinesses = () => {
   // Function definition
}
useEffect(() => {
   if (!mount) {
      setMount(true);
      fetchBusinesses();
   }
},[fetchBusinesses, mount]);

Это решение довольно простое, и вам не нужно переопределять предупреждения ESLint. Просто сохраните флаг, чтобы проверить, смонтирован ли компонент или нет.

Вы попробуйте так:

const fetchBusinesses = () => {
    return fetch("theURL", {method: "GET"})
        .then(res => normalizeResponseErrors(res))
        .then(res => {
            return res.json();
        })
        .then(rcvdBusinesses => {
            // Some stuff
        })
        .catch(err => {
            // Some error handling
        });
  };

а также

useEffect(() => {
    fetchBusinesses();
});

Это работает для вас.

Но я предлагаю попробовать этот способ, и он также работает для вас. Это лучше, чем предыдущий способ. Я использую это следующим образом:

useEffect(() => {
    const fetchBusinesses = () => {
        return fetch("theURL", {method: "GET"})
            .then(res => normalizeResponseErrors(res))
            .then(res => {
                return res.json();
            })
            .then(rcvdBusinesses => {
                // Some stuff
            })
            .catch(err => {
                // Some error handling
            });
    };

    fetchBusinesses();
}, []);

Если вы получаете данные на базе определенного id, то добавьте в callback useEffect [id]. Тогда он не может показать вам предупреждение React Hook useEffect has a missing dependency: 'any thing'. Either include it or remove the dependency array

Просто передайте функцию в качестве аргумента в массиве useEffect...

useEffect(() => {
   functionName()
}, [functionName])

Что ж, если вы хотите посмотреть на это по-другому, вам просто нужно знать, какие опции есть у React, которые не являются exhaustive-deps. Одна из причин, по которой вы не должны использовать функцию замыкания внутри эффекта, заключается в том, что при каждом рендеринге он будет воссоздаваться/уничтожаться снова.

Таким образом, в хуках есть несколько методов React, которые считаются стабильными и неисчерпаемыми, где вам не нужно применять зависимости useEffect и, в свою очередь, не будет нарушать правила взаимодействия react-hooks/exhaustive-deps. Например, вторая возвращаемая переменная useReducer или useState, которая является функцией.

const [,dispatch] = useReducer(reducer, {});

useEffect(() => {
    dispatch(); // Non-exhausted - ESLint won't nag about this
}, []);

Так что, в свою очередь, вы можете сосуществовать со всеми вашими внешними зависимостями с вашими текущими зависимостями в вашей функции редуктора.

const [,dispatch] = useReducer((current, update) => {
    const { foobar } = update;
    // Logic

    return { ...current, ...update };
}), {});

const [foobar, setFoobar] = useState(false);

useEffect(() => {
    dispatch({ foobar }); // non-exhausted `dispatch` function
}, [foobar]);

Это предупреждение возникает, если переменные, которые вы используете внутри useEffect, определены внутри компонента или переданы компоненту в качестве реквизита. Поскольку вы определили fetchBusinesses() внутри того же компонента, вы должны передать его в массив зависимостей.

Но если вы импортировали fetchBusinesses(), а затем использовали его внутри useEffect, вам не нужно было бы добавлять его в массив зависимостей. Вот как мы на самом деле настраиваем наши приложения Редукс: мы всегда импортируем наших создателей действий и запускаем их внутри useEffect, не добавляя их в массив зависимостей.

То же самое верно и для useMemo.

В моем случае это предупреждение было связано с моей локальной переменной organization, и когда я помещал organization в массив зависимостей, useEffect извлекался бесконечно. Поэтому, если у вас есть проблемы, подобные моей, используйте useEffect с массивом зависимостей и разделите:

Потому что, если у вас есть несколько вызовов API, которые изменяют состояние, он вызывает useEffect несколько раз.

От:

  const { organization } = useSelector(withOrganization)
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(getOrganization({}))
    dispatch(getSettings({}))
    dispatch(getMembers({}))
  }, [dispatch, organization])

К:

  const { organization } = useSelector(withOrganization)
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(getOrganization({}))
    dispatch(getSettings({}))
  }, [dispatch, organization])

  useEffect(() => {
    dispatch(getMembers({}))
  }, [dispatch])

Вы можете избавиться от этого предупреждения Es-lint, передав ссылку на него:

Пример указан ниже, однако вы можете посмотреть решение по этой ссылке: https://thewikihow.com/video_r4A46oBIwZk&t=8s

Предупреждение: Строка 13:8: React Hook В React.useEffect отсутствуют зависимости: «история» и «currentUser?.role». Либо включите их, либо удалите массив зависимостей react-hooks/exhaustive-deps

React.useEffect(() => {
    if (currentUser?.role !== "Student") {
        return history.push("/")
    }
}, [])

Разрешение: Шаг 1: Переместите бизнес-логику в отдельный const.

Теперь предупреждение: React Hook React.useEffect имеет недостающую зависимость: «roleChecking».

const roleChecking = () =>{
   if (currentUser?.role !== "Student") {
        return history.push("/")
    }
}

React.useEffect(() => {
    roleChecking()
}, [])

Последний шаг — создать ссылку на функцию:

  const roleRef = React.useRef();

  const roleChecking = () => {
    if (currentUser?.role !== "Student") {
      return history.push("/");
    }
  };
  roleRef.current = roleChecking;

  React.useEffect(() => {
   return roleRef.current();
  }, [currentUser?.role]);

Кажется, функция fetchBusinesses объявлена ​​в компоненте. Это означает, что в каждом рендере объявляется новая функция, которая запускает хук.

Есть 2 подхода к решению проблемы.

1. Переместите объявление функции fetchBusinesses из компонента.

2. Оберните функцию fetchBusinesses крючком useCallback.

Первый вариант предпочтительнее.

Это не ответ, специфичный для варианта использования вопроса, а более общий случай, и он охватывает случай, когда useEffect или извлечение и импорт не работают. Сценарий useRef:

Иногда сценарий заключается в том, что useEffect должен иметь пустой массив, и вы все еще хотите использовать его внутри частей состояния useEffect, но все же вы не хотите вводить их в качестве зависимостей, также вы можете попробовать использовать useCallback, и теперь реакция жалуется на зависимости использования Callback и вы застряли. При этом в некоторых случаях можно использовать useRef. Например:

const locationRef = useRef(location);
useEffect(()=>{
const qs = locationRef.current.search
...
},[])

Вы должны быть осторожны при использовании этой техники и знать, что useRef не активирует процесс рендеринга.

используя функцию вызова UseEffect fetchBusinesses, объявите в useEffect(), объявив константную переменную после вызова имени функции,

useEffect(()=>{
const fetchBusinesses=()=>{
   console.info(useeffect fetchbussinesses functions)
}
 fetchBusinesses();
},[declare the variable used in useeffect hooks ])