useEffect и правило исчерпывающей зависимости ESlint

Question

В настоящее время я застрял в том, как создать свой лог c без предупреждения о exhaustive-deps в моем useEffect.

Моя цель - отслеживать навигацию ( введите дату страницы, оставьте дату и местоположение страницы) при изменении местоположения.

Я использую useLocation() из react-router-dom и useLastLocation() из react-router-last-location.

const location = useLocation()
const lastLocation = useLastLocation()

const [date, setDate] = React.useState(new Date())

React.useEffect(() => {
  const end = new Date()
  API.sendData({ start: date, end, location: lastLocation })
  setDate(end)
}, [location, lastLocation])

Это работает нормально , но мой useEffect массив зависимостей должен содержать date, чтобы не было предупреждения exhaustive-deps, но его добавление приведет к бесконечным циклам.

Каков правильный способ сделать это?

Answer 1

Диспетчер useState также позволяет вам предоставить функцию, которая принимает текущее значение как аргумент, а не просто значение. Таким образом, вы можете избежать date как зависимости.

const location = useLocation()
const lastLocation = useLastLocation()

const [date, setDate] = React.useState(new Date())

React.useEffect(() => {
  setDate((currentDate) => {
    const end = new Date();
    API.sendData({ start: currentDate, end, location: lastLocation });
    return end;
  });
}, [location, lastLocation]);