使用React过程中的那些坑

在使用React框架开发项目的过程中,遇到各种各样的bug,每次定位bug查找原因都花了不少时间,并且遇到相同bug的概率特别大,就把bug产生原因和解决方法做一个持续的记录。

Module not found: Error: Cannot resolve module 'react/lib/ReactMount' 

凡是Module没有找到,那就是因为没有这个模块,重装npm包或者看看是否因为升级而取消了某个包

Unknown props `visible`, `onCancel`, `onCreate` on <locCreateForm> tag. 

这个错误是标签写错了,因为没有大写 ,一般报这个错误不是因为标签写错了就是因为属性写错了

Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's 
constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern,
but can be moved to `componentWillMount`.

<span onClick={()=>{this.showModifyModal(value)}}>修改</span>
在span的onClick事件中 我使用showModifyModal函数并向其中传参 会报错
但是如上包裹一层便可以解决

Super expression must either be null or a function, not undefined

import引入组件的时候
路径错误或者使用{}的方式引入一个组件

Cannot read property '_currentElement' of null

如果state里面没有赋予初始值 在render函数里面读不到

You should not use <Route component> and <Route children> in the same route

http://www.cnblogs.com/sylarmeng/p/6920903.html

This git repository has untracked files or uncommitted changes

当我想使用 npm run eject时 报这个错 这时git add 再commit和push

create-react-app项目添加less配置

https://segmentfault.com/a/1190000010162614

Element from loaders list should have 'loader' or 'loaders' with sass-loader webpack

这个属于在webpack中配置less失败,需要正确的配置less

Error: `output.path` needs to be an absolute path or `/`.

启动 webpack-dev-server 时报错,在 webpack.config.js 里修改 output.path
var path = require('path');
output: {
path: path.join(__dirname, './dist/'),
filename: 'js/[name].js'
}

是用BrowserRouter还是HashRouter

react-router4的文档用的是BrowserRouter,照着文档的demo写,发现第一次路由过去的路径能正常显示,再刷新页面就发现说找不到路径了,这就纳闷了,不知道哪里出了问题。后来得知BroswerRouter是需要服务端配合的,服务端重定向到首页,BrowserRouter是基于html5的pushState和replaceState的,很多浏览器不支持,存在兼容性问题。故最后选择HashRouter

antd Menu组件在React16中报错

https://reactjs.org/warnings/refs-must-have-owner.html

如何在项目中使用antd
image.png
webpack使用css-loader提示Module build failed: Unknown word 

有可能是配置项写反了
也有可能是css中引入了less 引入的时候不报错 但是如果在less中使用混合模式和函数模式就会报错

Form表单中使用TextArea插件报错 
image.png

因为这个用法在高版本中才能实现,低版本使用


image.png
react报错Each child in an array or iterator should

在遍历或者循环输出去渲染子组件的时候,key必不可少

渲染Link的时候 如果其中to的值稍微有点写错 LInk不会渲染出来
如果是循环渲染Link 则会导致整个循环 如push操作失败 而导致一条正确的数据都看不到
Objects are not valid as a React child (found: object with keys {…})

https://stackoverflow.com/questions/42602106/objects-are-not-valid-as-a-react-child-found-object-with-keys

NPM 无法安装任何包
NPM安装包时发生错误代码.png

解决办法:删除npmrc文件。

Objects are not valid as a React child (found: object with keys {}).

这个错误是因为将空对象{}赋值给key了

# Cannot read property 'getHostNode' of null
  • 这个错误就有点精妙了...我新创建一个组件时,这个文件类型不是JS,太过粗心大意了
Import in body of module; reorder to top import/first
//import 必须在其它所有业务代码前面(eslint 暴出)
  • 在使用react的v16版本搭建项目时引入一个组件报错 然后将import组件的代码放在所有代码的顶部就解决了这个问题
Warning: Failed prop type: Invalid prop `component` supplied to `Route`. 
  • 路由报错,但是并没有提示其它错误,所以一直找不到错误原因。后来发现是有一个路由的component引入了一个空的JS文件,这个文件之前是有写一个组件的但是被我全部注释就成了一个空的文件。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 223,507评论 6 521
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 95,626评论 3 401
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 170,466评论 0 366
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 60,456评论 1 300
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 69,473评论 6 398
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 53,016评论 1 314
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 41,409评论 3 426
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 40,370评论 0 278
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,909评论 1 322
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,960评论 3 343
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 41,102评论 1 354
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,754评论 5 350
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,428评论 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,917评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,036评论 1 275
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 49,582评论 3 380
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 46,126评论 2 362

推荐阅读更多精彩内容

  • 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈...
  • 生成SSH密钥过程: 1.查看是否已经有了ssh密钥:cd ~/.ssh如果没有密钥则不会有此文件夹,有则备份删除...
    我是不是叫没烦恼阅读 539评论 0 2
  • git ssh key 设置 设置完成后,git pull,push等命令就不需要再输入用户名和密码了 生成公钥,...
    左手一份执阅读 283评论 0 0
  • 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈...
    失心的惬意阅读 310评论 0 0
  • 关于树,人们历来都是赞美的。“死前可以为人遮阳避雨,死后亦可成为栋梁之才”算是对它的最佳褒奖。 从一颗小种子,到生...
    天雨恋空阅读 228评论 0 1