React Hooks：汉堡菜单 onClick 无法识别 useCallback 返回值

Question

我的应用程序中有一个组件可以处理两件事，

应用程序的布局（移动设备与桌面设备）以及其中的导航。这是一个类的实现。

此代码片段包含使用类编写的组件。这就是它的样子。

但将其切换为功能性后，有两件事停止工作：

移动侧抽屉无法打开和关闭。但是，如果使用传递硬编码值true，当您进入移动视图时，它确实会打开。

第二个是，当路由器更改 URL 时，相应的组件不会呈现。例如/profile应该带一个到个人资料页面

为了解决汉堡菜单问题，我尝试使用useCallback一些我认为处理正确渲染的好策略。但无济于事。基本上是一个总是返回正确值的函数。Open menu === true和Closed menu === false

我什至设置了一个useEffect钩子来触发该isToggled值的日志，只是为了确保一切正常。

 var useToggle = initialState => {

    const [isToggled, setIsToggled] = React.useState(initialState);

    const toggle = useCallback(() => setIsToggled(state => !state), [setIsToggled]);

    return [isToggled, toggle];

  };

  var [fixed, setFixed] = useState(null);

  var [isToggled, toggle] = useToggle(false);

  var [Content, setContent] = useState(null);

  var [isMobile, setIsMobile] = useState(false);

  var [isDesktop, setIsDesktop] = useState(false);

  var handleSidebarHide = () => false;

 

  var hideFixedMenu = () => setFixed(false);

  var showFixedMenu = () => setFixed(true);

  useEffect(() => {

    console.log('isToggled', isToggled);

  }, [isToggled]);

这是完整的组件：

import React, { useCallback, useState, useEffect, useContext } from 'react';

import { Link, NavLink } from 'react-router-dom';

import Modal from '../components/Modal/MyModal.jsx';

import {

  Container,

  Menu,

  Responsive,

  Segment,

  Visibility,

  Sidebar,

  Icon,

  Button

} from 'semantic-ui-react';

Answer 1

看起来我忘记了这个布局及其更改为功能版本的一个重要方面！除了处理由于浏览器宽度变化而导致的组件不同布局之外，我忘记在功能钩子中添加其他重要的依赖项useEffect（汉堡包侧面板、模式功能等）。特别是fixed, children, isToggled, modalActive。当我继续引用prop/state它所依赖的那些值的类版本时，功能组件的外观和感觉自然会比原始版本（类版本）有所改进。这是仅使用钩子 \o/ 的新更新版本import React, { useCallback, useState, useEffect, useContext } from 'react';import { Link, NavLink } from 'react-router-dom';import Modal from '../components/Modal/MyModal.jsx';import {  Container,  Menu,  Responsive,  Segment,  Visibility,  Sidebar,  Icon,  Button} from 'semantic-ui-react';import { connect } from 'react-redux';import { modalStateOn, modalStateOff } from '../store/reducers/ui/index';import UserContext from '../components/UserContext/UserContext.jsx';const getWidth = () => {  const isSSR = typeof window === 'undefined';  return isSSR ? Responsive.onlyTablet.minWidth : window.innerWidth;};function logOutMenuItemHelper(  isMobile,  isLoggedIn,  history,  modalActive,  nav,  NavLink,  modalStateOn,  modalStateOff,  handleSidebarHide