React问题汇总

ReactNative 常见问题汇总(1)

 

作者 草帽团_山治 关注

2016.08.22 15:42 字数 809 阅读 763 评论 1 喜欢 4

总想说点啥

最近在学习ReactNative，感慨良多；由于当年太任性，没有好好学习JS，现在想想可谓是痛心疾首啊！不过话又说回来，好像ReactNative跟JS没有什么太大的关联，但又没有太大的区别（以上是个人观点，不代表任何立场；本人是个菜鸟一枚，见解不到位的，望大神私信指正，在此先叩谢！）。

使用ReactNative需要搭建RN开发环境，在此就不介绍了，因为网上特别多，请随意百度；而我采用的是FaceBook推荐的IDE（Atom+Nuclide）安装教程(Windows平台的小伙伴还请自行百度哦)，这样安装可以解决网上说的Atom性能卡顿的问题。

书归正传

ReactNative常见问题汇总笔记一

1. Can't find variable: xxxx

屏幕快照 2016-08-22 上午9.47.46.png

  问题分析：搞IT的就算英文再烂应该也能看懂这句log吧，所以缺少什么就导入什么文件；
   Debug：是系统自带的Component的话，就在当前JS中找到Import {........} from 'react-native'，在{}中添加对应的名称就可以了；如果不是系统的，那就自行创建这个Component.

2. Unable to find this module in its module map or any of the node_modules directories under ......

屏幕快照 2016-08-22 上午11.08.29.png

  问题分析：这句话的意思是‘在模块映射或任何node_modules目录下都无法找到该模块’，因此查看一下是否有引用到没有导入的Component;
  Debug：因此找到图中的module 在代码中核查这个路径是否存在该Component；解决方法如下:
改正前：

import MySceneComponent from '../MySceneComponent';

改正后：

import MySceneComponent from './MySceneComponent';

3. Unhandled JS Exception: null is not an object (evaluating 'this.state.xxx')

屏幕快照 2016-08-22 上午11.19.17.png

  问题分析：ES6的初始化需要把初始化的对象放在Constructor方法中，而不是放在getInitialState中；而如果是采用的是React.createClass的话就是可以把初始化放在getInitialState之中，因此分情况而定；
  Debug：具体情况具体分析。

#4. this.setState is not a function

屏幕快照 2016-08-22 上午11.33.12.png

  问题分析：是说这个状态设置不是一个函数；在react中的this作为的是组件的实例，当成功回调的时候，就改变了this的指向；react中支持箭头（=>）指向this，和bind()函数绑定组件实例（注：据说bind()是ES5的方法，由于我的ES没有一点点的涉及，所以这是网友说的）；
  Debug：根据红色的错误日志点击第一条日志，然后在IDE中修改代码为

使用bind()绑定组件方案：

onRefresh={this._onRefresh.bind(this)}

使用ES6新特性箭头函数=>()的解决方案：

onRefresh={() => {this._onRefresh()}}