Cannot read properties of undefined (reading ‘push‘)

Cannot read properties of undefined (reading 'push')

Zwq8023520

6022人浏览 · 2022-08-14 15:04:15

Zwq8023520 · 2022-08-14 15:04:15 发布

TypeError: Cannot read properties of undefined (reading 'push')

今天在写react的后台管理系统中遇到了这个问题，目的是点击不同的菜单列表展示不同的路由，出现错误的原代码如下：

 const Admin = ({history}) => {
    const [collapsed, setCollapsed] = useState(false);
  
    const dispatch = useDispatch()
    const loginOutConfirm = () => {
        confirm({
          title: '真的要退出吗?',
          icon: <ExclamationCircleOutlined />,
          content: '本网站不会保存你的操作，真的要退出吗？',
      
          onOk() {
           dispatch(loginOutAction())
          },
      
          onCancel() {
            console.log('Cancel');
          },
        });
      };
    
  return (
    <AdminContainer>
      <Layout style={{height:'100%' }}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div  >
            <img className="logo"  src="https://t7.baidu.com/it/u=3571871208,2635260997&fm=193&f=GIF" alt="" />
        </div>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={[]}
          defaultOpenKeys={['2']}
          onClick={({key}) =>{
           history.push(key)
          console.log(key)
          }}
          items={[
            {
              key: '/admin/main',
              icon: <UserOutlined />,
              label: '后台首页',
            },
            {
              key: '2',
              icon: <VideoCameraOutlined />,
              label: '用户管理',
              children:[{key:'/admin/users',label:'用户列表'},
              {key:'/admin/role',label:'角色列表'},
              {key:'/admin/node',label:'权限列表'}
            ]
            },
            {
              key: '3',
              icon: <UploadOutlined />,
              label: '菜谱管理',
              children:[{key:'/admin/food',label:'菜谱列表'}]
            },
          ]}
        />
      </Sider>
      <Layout className="site-layout">
        <Header
          className="site-layout-background"
          style={{
            padding: 0,
          }}
        >
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: () => setCollapsed(!collapsed),
          })}
          <div style={{float:'right'}}>
            <span style={{padding:'20px'}}>公主</span>
            <span style={{padding:'20px'}} onClick={loginOutConfirm}>用户退出</span>
          </div>
        </Header>
        <Content
          className="site-layout-background"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
          }}
        >
          Content
        </Content>
      </Layout>
    </Layout>
    </AdminContainer>
  );
};

export default Admin;

TypeError: Cannot read properties of undefined (reading 'push')

onClick

E:/React/react-17/src/views/Admin/ui/admin.jsx:52

  49 | defaultSelectedKeys={[]}
  50 | defaultOpenKeys={['2']}
  51 | onClick={({key}) =>{
> 52 |  history.push(key)
     | ^  53 | console.log(key)
  54 | }}
  55 | items={[

View compiled

▶ 26 stack frames were collapsed.

This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message.

遇见这个问题我就开始核对老师的代码，三遍下来与老师的代码一模一样可我的就是路由跳转不成功。这时候我尝试了打印history，控制台显示的结果是undefined。应该是我的history没有传过来，导致跳转不成功。然后我想到这是函数式组件，有一个钩子函数叫useHistory。我决定使用useHistory这个钩子函数来进行路由跳转，结果成功了，记录一下自己学会找bug并成功解决bug.

成功的代码：