bug集bug 筛选数组没有得到获取到数据箭头函数中,去掉return ,必须将一起去掉,否则里面的值为空

bug集合

1.未报错,但是 newList = [ ]

筛选数组没有得到获取到数据

2 . 箭头函数中,去掉return ,必须将{ }一起去掉,否则里面的值为空

3 . !!!属性或方法“obj”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的. 函数没有形参 , 但点击事件传了参数 , 实参中的obj来自外部 , 而外部没有声明过obj , 所以工作台报错 . 将实参中的参数去掉

!!!webpack打包需要多多注意细节,例如打包时出现you may need an appropriate loader to handle this file type ....就表示我们需要下载一个loader来处理这个事件.
有两个路径引用是相同的,所以将css正则判断改为less,文件就可以正常被读取了.
浏览器报错

from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

文件使用了file协议 , 导致跨域报错 , 可能原因有鼠标双击打开文件 , 使用open in browser打开文件 , 该协议会导致跨域问题 , 而使用http与https则没有问题 .

browser可以直接在html文件处右键打开就可以读取 , 而live server必须将整个文件打开才能读取该html文件 , 由于两个插件使用情况不一样 , 所以导致路径而产生跨域报错 , 如图

!!!# 解决跨页面未定义变量的两种报错 (xxx is not defined) 报错,显示data未定义(data is not defined)

首先检查data声明,data为灰色表示未调用,错误1

查看函数调用是否正确,变量传递不正确,错误2

10.浏览器中输入查询的地址不一致,报错

浏览器已经提示很明显提示,在'get'接口中读取到的为http://localhost:3000/getapi?a=1&b=2 这个地址与浏览器中输入查询的地址不一致所以报错,但是此时应该注意的是服务器是正常运行的,并且接收到了请求,只是数据从服务器再次传到浏览器的时候被浏览器阻止.
下一个cors包在请求的路由中添加一个Access-Control-Allow-Origin响应头.如下

const = require('cors') app.use(cors()) res.setHeader('Access-Control-Allow-Origin', '*') 
// * 表示允许任何域名来访问

去哪找.jpg

404(not found),意思是根据前面这个地址请求没有在服务器中找到适配值. 在确定输入的服务器地址没有出错情况下,只能是服务器端存在问题. 根据提示地址前面的请求接口可以直接定位错误bug,改正后就可以正常打印返回值,如下图.

常量使用错误.jpg

终端打印可以发现,第一次打印已经拿到了tool.js模块,但是第二次打印却直接报错,说明模块中的代码无法调用.

JSON.stringify(data) 将data转为JSON全字符串格式.

13.index.js中缺少导出 ,添加 export default router

5-11-3缺少导出.jpg

14.vuex中应该使用字符串,但是找到的是一个object

15.vue中this的可以指向methods中声明的函数

16.提示默认导出的store不是一个组件 , Vuex后面的组件调用必须首字母大写

改正后,字体颜色也会发生改变.

17.声明不被允许情况 ,newList不是一个唯一值 , 发生了改变 ,需要将 const 改为 let

18.计算属性必须要有返回值 ,computed 和 getters 都是必不可少的

19.组件未注册,未知自定义元素, 只需要在main.js中导入组件即可

5-17-1element组件未注册.jpg

运行时。esm。js？c320:619[Vue warn]：属性或方法“el”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性在数据选项中或对于基于类的组件是被动的。 vue.runtime.esm.js?c320:619 [Vue warn]: Property or method "el" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

循环中 elementUI表单的index是唯一值 , 路由是挂载在上面的 , 所以根据服务器提供的路由地址可以跳转到不同的页面中 , 那么这个index应该是动态组件 , 需要加 : 才能正常运行 .

由于 template 上面不能添加 :key 属性 ,所以将其添加到包裹的元素中 , 但是又会提示--应当添加到template中 , 特别是v-if与v-else配合使用时 , 会出现错误提示(其实代码的思维并没有错,两种情况用了v-if后面当然是v-else) , 可以将v-else的改为 v-if 并对上一个 v-if 的值取反即可 . ---虽然浏览器不报错 , 但是插件报错了给了提示 , 看着难受啊必须改掉.

21.获取表单并清空表单中的数据

也可以直接将各个数据清空填到函数内部

22.控制台不会报错 , 但不会出现效果 ,是条件写反了 , 控制台直接报错则是条件写错

23.更改配置文件需要重启服务器 , 切记

24.未知操作

在module里面,需要先引入组件的名再引用方法

25.element中修改树状图名字的动态属性,不需要到method中定义,本质是一个对象,直接在data中处理就好了

26.异步请求错误,未能找到请求数据(这次是导入单词书写错误)

27.动态路由返回,是异步操作,需要await

28.请求跟地址填写错误,请求无法成功(对象不是函数)

完整的应为'@/utils/request' , 如果不加request默认选中index文件

29.父子之间相互传递数据

30.组件注册错误

6-21-1,组件注册.jpg

组件的注册不能使用大括号 , 大括号使用表示导出的只是文件中的某一项,且是按需导出的才行

31.严格模式下 , 不能使用8进制或者16进制

6-29-2严格模式.jpg

6-29-3 16进制.jpg

32.watch监听器,必要回调handler(newvalue),可以监听组件传来的值和vuex中获取的值,immediate默认值为false,改为true可以在组件生成时监听数据

33.未兑现承诺,是promise中的reject没有catch接收的结果

34.需要在tsx中导入REACT import React from 'react'

35.Uncaught TypeError: Cannot read properties of null (reading 'style')

未捕获的类型错误:无法读取null属性(读取“样式”)

使用 useRef 时报这个错误 , 原因是react在读取脚本之前无法读取 null 属性(读取'style')

    const testRef = useRef(null)  //直接获取,会报上述错误
    
    //改进
    
    const testRef = createRef() //挂钩形式括号内部不能添加参数
    
    //修改样式:
    testRef.current.style.color = 'red'

解决方法是 : 使react在读取Dom之前等待组件运行完成 , 在这里离可以使用 createRef 挂钩的形式 , 也可以简单使用普通绑定

    const [color,setColor] = useState('black')
    const changeTest = ()=>{
        setColor('red')
    }
    return (
        <div>
            <div className = 'test'
            style={{color:color}}
            onClick={changeTest}
            >
                text颜色改变
            </div>
        </div>
    )