javascript React.JS this.state 未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31636720/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React.JS this.state is undefined
提问by Gaurav Jagtap
I currently have this component in React.JS which shows all the Images passed to it in an array and onMouseOver it shows a button below. I planed on using setState to check the variable hover if is true or false and toggle the button of that image accordingly however I keep getting the following error:
我目前在 React.JS 中有这个组件，它显示在数组中传递给它的所有图像，并且 onMouseOver 它显示下面的按钮。我打算使用 setState 检查变量悬停是否为真或假并相应地切换该图像的按钮，但是我不断收到以下错误：
Uncaught TypeError: Cannot read property 'state' of undefined
未捕获的类型错误：无法读取未定义的属性“状态”
var ImageList = React.createClass({
getInitialState: function () {
return this.state = { hover: false };
},
getComponent: function(index){
console.log(index);
if (confirm('Are you sure you want to delete this image?')) {
// Save it!
} else {
// Do nothing!
}
},
mouseOver: function () {
this.setState({hover: true});
console.log(1);
},
mouseOut: function () {
this.setState({hover: false});
console.log(2);
},
render: function() {
var results = this.props.data,
that = this;
return (
<ul className="small-block-grid-2 large-block-grid-4">
{results.map(function(result) {
return(
<li key={result.id} onMouseOver={that.mouseOver} onMouseOut={that.mouseOut} ><img className="th" alt="Embedded Image" src={"data:" + result.type + ";" + "base64," + result.image} /> <button onClick={that.getComponent.bind(that, result.patientproblemimageid)} className={(this.state.hover) ? 'button round button-center btshow' : 'button round button-center bthide'}>Delete Image</button></li>
)
})}
</ul>
);
}
});
采纳答案by danillouz
You get the error because you're storing the reference to thisin a thatvariable which you're using to reference your event handlers, but you're NOT using it in the ternary expression to determine the classNamefor the buttonelement.
你得到的错误，因为要存储的参考this在that你使用引用您的事件处理程序，其可变的，但你不使用它三元表达式来确定className的button元素。
your code:
你的代码：
<button
onClick={ that.getComponent.bind(that, result.patientproblemimageid) }
className={ (this.state.hover) ? // this should be that
'button round button-center btshow' :
'button round button-center bthide'}>Delete Image
</button>
When you change this.state.hoverto that.state.hoveryou won't get the error.
当您更改为时this.state.hover，that.state.hover您将不会收到错误消息。
On a side note, instead of storing the reference to thisin a thatvariable you can simple pass a context parameter to the map()method.
附带说明一下，您可以简单地将上下文参数传递给方法，而不是将引用存储this在that变量中。map()
results.map(function (result) {
//
}, this);
回答by max_new
In ES5 format you cannot set this.state directly
在 ES5 格式中你不能直接设置 this.state
var ImageList = React.createClass({
getInitialState: function () {
return { hover: false };
},
render : function(){
return(<p>...</p>);
});
However with new ES6 syntax you can essentially manage this:
然而，使用新的 ES6 语法，您基本上可以管理这个：
class ImageList extends React.Component{
constructor (props) {
super(props);
this.state = {hover : false};
}
render (){ ... }
}
