reactjs - useEffect 和 ESlint 穷举-deps 规则

Question

我目前坚持如何构建我的逻辑，而exhaustive-deps在我的useEffect.

我的目标是在位置更改时跟踪导航（输入页面日期、离开页面日期和位置）。

我正在使用useLocation()ofreact-router-dom和useLastLocation()of 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]);