[游戏开发] 记录一次排bug心得---Vue warn]: Error in render: “TypeError: Cannot read properties of null (reading ‘length

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 游戏开发 -> 记录一次排bug心得---Vue warn]: Error in render: “TypeError: Cannot read properties of null (reading ‘length -> 正文阅读

[游戏开发]记录一次排bug心得---Vue warn]: Error in render: “TypeError: Cannot read properties of null (reading ‘length

这是一次人类低阶程序员排bug过程

最近在跟b站up码神之路练习SpringBoot的个人博客项目，算是比较入门的项目吧！
当我跟着视频做到P22评论功能，发现一个bug
在这里插入图片描述

即登录后，无法查看文章详情。
F12后报的是
Vue warn]: Error in render: "TypeError: Cannot read properties of null (reading 'length
事实上我不是特别懂前端vue，所有前端代码是直接用up的代码。
然后自己摸索了一会，没有头绪。所以搂一眼评论，看看有没有同样遇到此问题的。
在这里插入图片描述

对于这个回答，我其实是觉得不靠谱的。主要原因是当用户没有登录时，是可以查看文章详情。即这跟类型是无关的，对于说id太长，跟是不靠谱，因为文章里的id有只为个位数，登录后依然无法打开。

于是我又苦哈哈接着去排，首先我去找返回的数据(如下)，这是符合接口要求的。
在这里插入图片描述
接着我打开WebStorm去看报错的代码
提示length为null，然后找到了 this.$store.state.avatar。这块以我浅薄的理解就像是全局变量一样

    computed: {
      avatar() {
        let avatar = this.$store.state.avatar

        if (avatar.length > 0) {
          return avatar
        }
        return default_avatar
      },
      title() {
        return `${this.article.title} - 文章 - 码神之路`
      }
    },

继续翻，找到了
在这里插入图片描述
这里我其实已经明白，大概是avatar返回null，或者没有返回

中午小睡一会，接着干

接着看后台代码
后台是用jwt技术，生成token，且把token放入redis中
在这里插入图片描述

(红框是我修改后，上面为原token，果然没有avatar)
继续找

    @Override
    public SysUser findUser(String account, String password) {
        LambdaQueryWrapper<SysUser> queryWrapper=new LambdaQueryWrapper<>();
        queryWrapper.eq(SysUser::getAccount,account);
        queryWrapper.eq(SysUser::getPassword,password);
        queryWrapper.select(SysUser::getAccount,SysUser::getId,SysUser::getNickname);
        queryWrapper.last("limit 1");
        return sysUserMapper.selectOne(queryWrapper);
    }