在使用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 {…})
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文件，这个文件之前是有写一个组件的但是被我全部注释就成了一个空的文件。
网友评论