Question

路径名称更改后，我想隐藏移动菜单（使用ReactRouter）。

下面的代码向我显示警告，因为我没有将mobileOpen作为依赖项进行跟踪。但这有效。

const Navbar: React.FC<Props> = props => {
  const { pathname } = useLocation()
  const [mobileOpen, setMobileOpen] = useState(false)

  useEffect(() => {
    if (mobileOpen) setMobileOpen(false)
    main.current?.scrollTo(0, 0)
  }, [pathname, main])

...

将其添加到依赖项数组后，代码导航将不再打开，因为它将直接触发效果并再次关闭。

这是正确的方法吗？会有更好的方法来防止不必要的渲染吗？

Answer 1

据您的代码了解，您实际上不需要检查mobileOpen是否正确。我想无论何时触发该效果，您都想将mobileOpen设置为false。我相信，如果您像这样更新代码，就可以了：

useEffect(() => {
  setMobileOpen(false);
  main.current?.scrollTo(0, 0);
}, [pathname, main])

如果出于某种原因仍然需要检查mobileOpen的值为真，则也可以使用setMobileOpen((prevState) => { ... });语法。

setState在useEffect中，状态为条件

1 个答案: