React 错误

错误 log 日志

_ TypeError: Cannot call a class as a function _ 右侧文件名称：react-hot-loader.development.js?fef5:1607

错误分析

主要是引入 react-hot-loader 热更新的时, hot热模块回调方法接收了一个 class 类作为函数组件进行更新导致错误, 实际上hot内部 ast 解析树是基于函数进行 new 一个组件.

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function;
  }
}

错误代码

由于React.Component扩展的类是生成一个new 实例对象, 应该修改来自与一个函数的扩展.

import { hot } from "react-hot-loader/root";
class App extends React.Component {
  render() {
    return <div>123</div>;
  }
}
export default hot(App);

正确修改

class App extends React.PureComponent {}

数组项赋值

错误信息：TypeError: Cannot assign to read only property ‘x’ of object ‘#’

组件的数组遍历时, 如果每一项被调用时需要修改, 当前的每一项都是被复制的项, 保存在内存的项, 修改被引用项需要使用扩展符, 或者深度克隆, 比如 lodash 的 clonedeep 方法.