一、依赖安装报错
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循环的最外层的元素上,否则会报错。
四、结语:
有不妥的地方欢迎大家指出~