useEffect 和 ESlint exhaustive-deps 规则

Question

我目前卡在如何构建我的逻辑，而我的 useEffect.

中没有任何关于 exhaustive-deps 的警告

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

我正在使用 react-router-dom 的 useLocation() 和 react-router-last-location 的 useLastLocation()。

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]);

useEffect 和 ESlint exhaustive-deps 规则

useEffect and ESlint exhaustive-deps rule

reactjs

eslint

eslint-plugin-react-hooks