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