TypeError：undefined不是一个对象（评估'this .__ reactAutoBindMap'）

问题描述：

我正在使用由NPM安装的react.js的最新版本。我已经写了这个代码，当我通过jsfiddle的时候，但是当我在我自己的设置中尝试它时，它不起作用。这里是我正在使用的代码：TypeError：undefined不是一个对象（评估'this .__ reactAutoBindMap'）

/** @jsx React.DOM */ 

var React = require('react'); 

var MyButton = React.createClass({ 
    render: function(){ 
     return (<button onClick={this.props.onClick} >more!</button>); 
    } 
}); 

var Count = React.createClass({ 

    getInitialState: function(){ 
     return { counter: 0 }; 
    }, 

    increment: function(){ 
     this.setState({ 
      counter: this.state.counter + 1 
     }); 
    }, 

    render: function(){ 
     return (<div> 
      <li>{this.state.counter}</li> 
      <MyButton onClick={this.increment} /> 
     </div>); 
    } 
}); 

React.render(<Count />, document.getElementById('container'));

，然后我的HTML文件看起来像这样：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>what the f</title> 
</head> 
<body> 
<div id="container"> 
    <!-- This element's contents will be replaced with your component. --> 
</div> 
<script src="js/main.js"></script> 
</body> 
</html>

在我的浏览器我得到一个错误说：

"TypeError: undefined is not an object (evaluating 'this.__reactAutoBindMap') 
(anonymous function)"

和一个警告说：

"Warning: Something is calling a React component directly. Use a factory or JSX instead. See: http://fb.me/react-legacyfactory"

---->更新：

在搜索确切问题区域后，我遇到两个具体问题。

答：React.render()函数不接受JSX。

为了什么显示没有错误我必须使用：的React.render(React.createElement(Count), document.getElementById('container'));

代替： React.render(<Count />, document.getElementById('container'));

B.然后我得到一个错误，只要我试图访问该对象的属性，例如，如果在上面的代码中，我注释掉任何有this.something它那么代码执行就好了，否则它给出了错误：

TypeError: undefined is not an object (evaluating 'this.__reactAutoBindMap')

这两个问题似乎都可能与jsx的问题有关，但我不确定为什么jsx会以某种方式工作，而不是其他问题。我可以毫不迟疑地返回<h1>hello!</h1>，但是jsx的其他方面在渲染时并不起作用......在这里变得绝望......这是一个bug还是我做错了什么？

--->更新

这里是我的一饮而尽文件：

var connect = require('gulp-connect'); 
var gulp = require('gulp'); 
var source = require('vinyl-source-stream'); // Used to stream bundle for further handling 
var browserify = require('browserify'); 
var watchify = require('watchify'); 
var reactify = require('reactify'); 
var concat = require('gulp-concat'); 

gulp.task('browserify', function() { 
    var bundler = browserify({ 
     entries: ['app_root/js/main.js'], 
     transform: [reactify], // convert JSX to javascript 
     debug: true, 
     cache: {}, packageCache: {}, fullPaths: true 
    }); 
    var watcher = watchify(bundler); 

    return watcher 
    .on('update', function() { 
     var updateStart = Date.now(); 
     console.log('Updating!'); 
     watcher.bundle() // Create new bundle that uses the cache for high performance 
     .pipe(source('app_root/js/main.js')) 
     .pipe(gulp.dest('dist/js')); 
     console.log('Updated!', (Date.now() - updateStart) + 'ms'); 
    }) 
    .bundle() 
    .pipe(source('app_root/js/main.js')) 
    .pipe(gulp.dest('dist/js')); 
}); 
// concat app to directory being served 
gulp.task('conkat', function(){ 
    gulp.src('/src/dist/app_root/js/main.js') 
     .pipe(concat('main.js')) 
     .pipe(gulp.dest('dist/js')); 
}); 

// copy index.html to served directory 
gulp.task('copy', function(){ 
    gulp.src('app_root/index.html') 
     .pipe(gulp.dest('dist')); 
      gulp.src('/src/dist/app_root/js/main.js') 
}); 

// watch app directory 
gulp.task('watch', function(){ 
    gulp.watch('app_root/**/*.*', ['reload']); 
}); 

// serve the dist directory 
gulp.task('serveDist', function(){ 
    connect.server({ 
     root: 'dist' 
    }); 
}); 

// run on change 
gulp.task('reload', [ 'browserify','conkat', 'copy' ]); 

// run all 
gulp.task('default', [ 'browserify', 'conkat','copy', 'serveDist', 'watch' ]);

和我的继承人package.son：

{ 
    "private": true, 
    "devDependencies": 
    { 
     "gulp":"^3.8.8", 
     "browserify":"^9.0.6", 
     "gulp-concat":"^2.4.1", 
     "react":"^0.13.1", 
     "reactify":"^0.14.0", 
     "watchify":"^3.1.0", 
     "vinyl-source-stream":"^1.1.0", 
     "react-router":"^0.13.2", 
     "gulp-connect":"^2.2.0" 
    } 
}

一切都在一个文件中，并声明以正确的次序宣？ – WiredPrairie 2015-04-03 10:36:52

一切都如你所见，html和javascript/react文件是单独的文件。 – 2015-04-03 13:18:16

您使用的是哪个版本的React？您是预编译JSX语法还是依靠浏览器转换它？因为你从''手动切换的行应该是完全相同的结果。 – WiredPrairie 2015-04-03 16:25:21

答

我有几乎同样的问题。尝试使用此：

React.render(React.createElement(Count), document.getElementById('container'));

nope ...没有区别:( – 2015-04-03 13:20:48

也许尝试： 'React.render（React.createFactory（Count）（），document.getElementById（'container'））;' – 2015-04-03 13:30:39

nope ..我不明白为什么所有这些奇怪的解决方法，为什么它不像文档中提到的那样工作？ – 2015-04-03 13:51:44

答

您应该安装Reactify 1.1.x版本：

"reactify": "~1.1.x"

TypeError：undefined不是一个对象（评估'this .__ reactAutoBindMap'）

相关推荐