我知道有类似的线程讨论范围问题。
使用以下组件
import React from 'react';
import ReactDOM from 'react-dom';
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 0
}
}
addMore() {
this.setState({
counter: this.state.counter + 1
});
}
render() {
return (
<div onClick={ this.addMore }>
<p>counter: { this.state.counter }</p>
</div>
);
}
}
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
当您单击div
时,您会得到无法读取null
的属性'setState'
我知道你可以像这样做this.addMore.bind(this)
,但所有这些看起来都很奇怪,只是为了让它工作。
什么被认为是最优雅的方式来做到这一点?当然,人们必须有一个首选的方式,除了眼睛疼痛之外,还有其他好处?
您需要将正确的this
上下文绑定到函数,您可以通过添加this.addMore=this.addMore.bind(this)来实现这一点
到构造函数。
constructor(props) {
super(props);
this.state = {
counter: 0
}
this.addMore = this.addMore.bind(this);
}
在ES5 React.createClass中,所有函数都自动绑定到正确的
this
,但在ES6类中,正确的this
上下文不会自动绑定。参考
这被称为绑定构造函数,这是React文档中当前推荐的“提高应用程序性能”的方法。参考
addMore = () => {
this.setState({
counter: this.state.counter + 1
});
}
箭头语法为您处理此
绑定
查看这个伟大的链接以了解更多信息,它显示了实现这一点的许多方法http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html
TypeError:无法读取应用程序上未定义的属性“collection”。在图层上发布(/home/niko/Desktop/opa/app.js:17:38)。在route的下一个(/home/niko/Desktop/opa/node_modules/express/lib/router/layer.js:95:5)中处理[as handle_request](/home/niko/Desk
问题内容: 您好,我正在尝试将React-Router与Firebase配合使用。但这给了我这个错误。 无法读取null的属性“ props” 这正是代码,我正在使用我的react-router 向下代码在组件上作为loginpanel组件。 我的react路由器在main.jsx上声明,我的react-router看起来像这样。 问题答案: 在回调中,指针不再指向您的React组件。有很多方法可
我收到以下JavaScript错误: TypeError:无法读取null的属性“title” 代码如下: mds-iMac: cmscart imac$nodemo app[nodemo] 1.11.0[nodemo]随时重启,输入[nodemo]观看:.[nodemo]启动(node: 2274)DeprecationWarning:在猫鼬中被弃用 [nodemon]应用程序崩溃-正在等待文件
我在我的Gatsby应用程序中得到了这个错误,该应用程序为作者提取places数据。当author.social的map()点为null时,该错误将显示 谢谢
请注意,我在react ProductScreen.js中呈现动态数据时有问题 注意,...数据在product.js中呈现得很好,但相同的数据在productscreen.js中不会呈现,因为productscreen.js链接是通过“id”呈现的。 谢谢app.js 导入“./homescreen.css”;从'../Components/Product'导入产品从'React'导入{useE