前端开发的一些小问题记录

简介: 开发过程中遇到的一些小问题记录。

一、依赖安装报错

1、unexpected error occurred:xxxx

解决方案

将yarn.lock删除,重新运行yarn install

二、antd相关问题

Form

1、Warning: getFieldDecorator will override value, so please don't set value directly and use setFieldsValue to set it.

原因分析

被设置了name属性的Form.Item包装的控件,表单控件会自动添加value,不能用控件的value来直接设置表单域的值。

解决办法

将控件中的value属性删除。

默认值可以用Form里的initialValue来设置,用setFieldsValue来动态更新。

这样就没有警告了。

2、Warning: You cannot set a form field before rendering a field associated with the value

原因分析

setFieldsValue这个方法里面传值的时候只能是form中用到的参数(即是getFieldDecorator方法中的field),没有的field一律不允许多传,否则就会报错。

解决办法

setFieldsValue严格使用form中name值。

Table

1、Warning: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.

原因分析

Table组件,未设置rowKey属性或者所设置的值中含有undefined(后台返回字段缺失)或者所设置的值中有重复值。

解决办法

知识点:rowKey可以是字符串或一个函数。

方法一

和后台沟通,确保设置的rowKey属性对应的字段的值一定会返回且唯一

   rowKey="applyId"    

   rowSelection={rowSelection}  

   columns={columns}  

   dataSource={data}  

方法二

将rowKey设置为index

   rowKey={(record,index) = index}  

   rowSelection={rowSelection}  

   columns={columns}  

   dataSource={data}  

三、开发相关问题

1、axios请求,浏览器接口返回值是object格式,可代码实际取到的值却是string

解决方案

检查object,看其格式是否准确。因为axios对格式要求很严格,所以可能是json格式问题导致的。

2、Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

原因分析

不能在组件销毁后设置state。

对某个API提交了一个异步请求,组件在收到响应前就被卸载了,收到响应之后调用了setState()企图更新state,但这个时候组件早就被卸载了。

为组件添加了监听事件,但是没有在componentWillUnmount()里移除这个监听事件,当组件移除以后监听的事件被触发。

在类似于setInterval()的函数里调用了setState(),但是没有在componentWillUnmount()里移除这些函数。

解决办法

应该在组件销毁时将异步请求撤销。

取消componentwillunmount方法中的所有订阅和异步任务。

阻止异步操作

componentWillUnmount() {

 this.setState = (state, callback) = {

   return

 }

}

清除定时

var timer;

componentDidMount = () ={

    timer = setTimeout(() = {

       this.setState({data:123456789})

   },5000)

}

componentWillUnMount = () ={

   if(timer){

       clearTimeout(timer)

   }  

3、Warning: Each child in a list should have a unique "key" prop.

原因分析

react的key涉及到react的diff算法,进行diff对比时 没有key值或者key值不唯一,会报错警告。

解决办法

在React里,当用map做循环渲染的时候,需要给渲染出的每一项增加一个key值,且key值每一项都应该不同。

key的赋值写在map循环的最外层的元素上,否则会报错。

四、结语:

有不妥的地方欢迎大家指出~


相关文章
|
30天前
|
移动开发 前端开发 HTML5
探索前端开发中的可访问性优化技巧
在当今互联网时代,前端开发的重要性日益凸显。然而,我们常常忽视了一个重要的方面:可访问性。本文将深入探讨如何通过优化前端代码来提高网站和应用程序的可访问性,使其能够更好地为各类用户提供良好的浏览体验。
|
10月前
|
存储 移动开发 前端开发
【React工作记录九十四】前端小知识点扫盲笔记记录3
【React工作记录九十四】前端小知识点扫盲笔记记录3
54 0
|
7月前
|
移动开发 前端开发 小程序
2018年工作年度总结(前端开发)
2018年工作年度总结(前端开发)
27 0
|
10月前
|
前端开发
|
10月前
|
域名解析 缓存 前端开发
【React工作记录一百】前端小知识点扫盲笔记记录5
【React工作记录一百】前端小知识点扫盲笔记记录5
53 0
|
10月前
|
前端开发 JavaScript
【React工作记录九十三】前端小知识点扫盲笔记记录2
【React工作记录九十三】前端小知识点扫盲笔记记录2
37 0
|
10月前
|
前端开发 JavaScript
【React工作记录九十五】前端小知识点扫盲笔记记录4
【React工作记录九十五】前端小知识点扫盲笔记记录4
55 0
|
10月前
|
存储 缓存 移动开发
【React工作记录九十二】前端小知识点扫盲笔记记录
【React工作记录九十二】前端小知识点扫盲笔记记录
56 0
|
11月前
|
Web App开发 存储 缓存
前端(一)——前端开发遇到的普遍问题以及解决策略
前端(一)——前端开发遇到的普遍问题以及解决策略
129 2
|
存储 JSON 前端开发
案例开发-前端开发及调试(二)| 学习笔记
快速学习案例开发-前端开发及调试。
92 0
案例开发-前端开发及调试(二)| 学习笔记