这一课，我这里出现了一个问题

Question

是HomeAside组件出现了问题, 代码出现在menus里面

const menus = _.cloneDeep(routes).filter((v)=> {
    v.children = v.children?.filter((v)=> v.meta?.menu && permission.includes(v.name))
    return v.meta?.menu && permission.includes(v.name)
  })
  

  const items: MenuProps['items'] = menus.map((v1)=>{
    const children = v1.children?.map((v2)=>{
      return {
        key: v1.path! + v2.path!,
        label: v2.meta?.title,
        icon: v2.meta?.icon
      }
    })
    return {
      key: v1.path!,
      label: v1.meta?.title,
      icon: v1.meta?.icon,
      children
    }
  })

我github代码仓库：https://github.com/xing-6464/react-check-in

老师帮我看看，我发现permission这个值menus代码里面就是undefined了，我把menus删除之后就可以打印出permission的正常值，我找了很久没有发现是什么问题，老师帮我看看，谢谢啦。

Answer 1

西门老舅 2023-02-02 10:45:19

你好，我把你代码运行了一下，并没有你说的问题呀。

function HomeAside() {

  const permission = useAppSelector((s) => s.users.infos.permission) as unknown[]

  console.log(permission)   // ✔

  const menus = _.cloneDeep(routes).filter((v)=> {

    console.log(permission)   // ✔

    v.children = v.children?.filter((v)=> v.meta?.menu && permission.includes(v.name))

    return v.meta?.menu && permission.includes(v.name)

  })

｝

menus外面和里面都是可以找到的，我用chrome测试的，可以把chrome升级到最新版本再试试。

• 提问者 星光荡开宇宙 #1

  老师，我尝试了一下其他方法还是不行，我使用其他浏览器也是不行，还有你的源代码启动也是一样的问题。

• 西门老舅 回复 提问者 星光荡开宇宙 #2

  那你先用别的电脑再测一下？看看情况咱们再排查问题

• 提问者 星光荡开宇宙 回复 西门老舅 #3

  const menus = _.cloneDeep(routes).filter((v)=> {
      v.children = v.children?.filter((v)=> v.meta?.menu && permission?.includes(v.name))
      return v.meta?.menu && permission?.includes(v.name)
    })
  
  我解决了问题，我在想既然permission是undefined，我在permission后面加了个?，就是permission有值在执行includes就可以了，页面渲染正常了。解决了这个bug。但是我还是被这个bug搞晕了。

点开查看后面2条评论