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

Question

В настоящее время я застрял в том, как построить свою логику без предупреждения о 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]);