每次更改location.pathname时使用效果

Question

我有一个名为nameScreen的变量，每次位置更改时我都需要更改我们的值。路径更改：

<Typography variant="h6" noWrap>
    {nameScreen}
</Typography>

我尝试：

const [nameScreen, setNameScreen] = useState('')
const location = useLocation();
useEffect(() => {
    changeTitleHeader()
        // eslint-disable-next-line react-hooks/exhaustive-deps
},[location.pathname])
  const changeTitleHeader = () => {
      if (location.pathname === '/home') {
        setNameScreen('Welcome to home!')
      }
      else if(location.pathname === '/users') {
          setNameScreen('Users')
      }
      else if(location.pathname === '/companies') {
        setNameScreen('Companies')
      }
  }

每次我的location.pathname更改时，我都需要这个排版组件在路由名称中有一个新值。

当location.pathname更改时，不会调用我的useEffect()。我该怎么解决这个问题？

Answer 1

在changeTitleHeader函数中也需要对location.pathname的依赖，而不仅仅是对useEffect的依赖。该函数会记住location.pathname的初始值，并且从不更新它，因此在调用时不会执行任何新操作。

您可以将useCallback用于此目的。这是代码：

const changeTitleHeader = useCallback(() => { sameThing() }, [location.pathname]);

我在这里假设，状态没有像预期的那样更新，但如果你的useEffect实际上没有启动，那么问题可能在其他地方。希望这能有所帮助。