Javascript 此关键字未指向当前对象

我有一个react应用程序，其中我从父组件获取属性，但当我尝试使用this.props设置子组件的状态时，我获取的props是未定义的错误。我可以理解，不知何故，这不是指向当前对象。你能帮我解决这个问题吗。谢谢

下一行出现错误

count: this.props.value,

下面的完整代码

import React, { Component } from "react";
import { throwStatement } from "@babel/types";

class Counter extends Component {
  constructor() {
    super();
    var self = this;

    this.incrementButtonClick = this.incrementButtonClick.bind(this);
    this.incrementDoubleClick = this.incrementDoubleClick.bind(this);
  }

  state = {
    count: this.props.value,
    tags: ["Markers", "Books", "Board"]
  };

  mySpanstyle = {
    fontSize: 10,
    color: "yellow"
  };

  render() {
    console.log("props ", this.props.value);
    return (
      <React.Fragment>
        <span className={this.getSpanClass()}>{this.formatCount()}</span>
        <button
          onDoubleClick={this.incrementDoubleClick}
          /* onClick={this.incrementButtonClick} */
          onClick={() => {
            this.incrementButtonClick("TEST");
          }}
          className="btn btn-primary"
        >
          Increment
        </button>
        <br></br>
      </React.Fragment>
    );
  }

  incrementButtonClick(e) {
    console.log("Increment button clicked", e);
    console.log(this.state.count);
    this.setState({ count: this.state.count + 1 });
  }

  incrementDoubleClick() {
    console.log("Increment button Double clicked", this);
  }

  getSpanClass() {
    return this.state.count === 0
      ? "badge badge-warning m-2"
      : "badge badge-info m-2";
  }

  getMethod() {
    var value = () => {
      console.log("values ", this.props.value);
    };
  }

  formatCount() {
    const { count } = this.state;
    return count === 0 ? "Zero" : count;
  }
}
export default Counter;

import React，{Component}来自“React”；
从“@babel/types”导入{throwStatement}”；
类计数器扩展组件{
构造函数（）{
超级（）；
var self=这个；
this.incrementButtonClick=this.incrementButtonClick.bind（this）；
this.incrementDoubleClick=this.incrementDoubleClick.bind（this）；
}
状态={
计数：this.props.value，
标签：[“标记”、“书籍”、“板”]
};
mySpanstyle={
尺寸：10，
颜色：“黄色”
};
render（）{
log（“props”，this.props.value）；
返回(
{this.formatCount（）}
{
此.incrementButton单击（“测试”）；
}}
className=“btn btn主要”
>
增量



);
}
递增按钮单击（e）{
console.log（“单击增量按钮”，e）；
console.log（this.state.count）；
this.setState（{count:this.state.count+1}）；
}
递增双击（）{
log（“双击增量按钮”，此按钮）；
}
getspan类（）{
返回this.state.count==0
？徽章警告m-2
：“徽章信息m-2”；
}
getMethod（）{
var值=（）=>{
log（“values”，this.props.value）；
};
}
formatCount（）{
const{count}=this.state；
返回计数===0？“零”：计数；
}
}
导出默认计数器；

您的

构造函数

需要接受

道具

，您的状态应该在构造函数内初始化：

  constructor(props) {
    super(props);

    this.incrementButtonClick = this.incrementButtonClick.bind(this);
    this.incrementDoubleClick = this.incrementDoubleClick.bind(this);

    this.state = {
      count: this.props.value,
      tags: ["Markers", "Books", "Board"]
    };
  }

类计数器扩展React.Component{
建造师（道具）{
超级（道具）；
this.incrementButtonClick=this.incrementButtonClick.bind（this）；
this.incrementDoubleClick=this.incrementDoubleClick.bind（this）；
此.state={
计数：this.props.value，
标签：[“标记”、“书籍”、“板”]
};
}
mySpanstyle={
尺寸：10，
颜色：“黄色”
};
render（）{
log（“props”，this.props.value）；
报税表（<
反应。片段>
<
span类名称={
这个.getSpanClass（）
} > {
this.formatCount（）
}<
双击按钮={
此选项为。递增双击
}
/*onClick={this.incrementButtonClick}*/
onClick={
() => {
此.incrementButton单击（“测试”）；
}
}
className=“btn btn主要”>
增量<
/按钮><
br/>
<
/反应。片段>
);
}
递增按钮单击（e）{
console.log（“单击增量按钮”，e）；
console.log（this.state.count）；
这是我的国家({
计数：this.state.count+1
});
}
递增双击（）{
log（“双击增量按钮”，此按钮）；
}
getspan类（）{
返回this.state.count==0？
“徽章警告m-2”：
“徽章信息m-2”；
}
getMethod（）{
var值=（）=>{
log（“values”，this.props.value）；
};
}
formatCount（）{
常数{
计数
}=本州；
返回计数===0？“零”：计数；
}
}
函数App（）{
报税表（<
计数器值={
1.
}
/>
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）
您的
构造函数
需要接受
道具
，您的状态应该在构造函数内初始化：

  constructor(props) {
    super(props);

    this.incrementButtonClick = this.incrementButtonClick.bind(this);
    this.incrementDoubleClick = this.incrementDoubleClick.bind(this);

    this.state = {
      count: this.props.value,
      tags: ["Markers", "Books", "Board"]
    };
  }


类计数器扩展React.Component{
建造师（道具）{
超级（道具）；
this.incrementButtonClick=this.incrementButtonClick.bind（this）；
this.incrementDoubleClick=this.incrementDoubleClick.bind（this）；
此.state={
计数：this.props.value，
标签：[“标记”、“书籍”、“板”]
};
}
mySpanstyle={
尺寸：10，
颜色：“黄色”
};
render（）{
log（“props”，this.props.value）；
报税表（<
反应。片段>
<
span类名称={
这个.getSpanClass（）
} > {
this.formatCount（）
}<
双击按钮={
此选项为。递增双击
}
/*onClick={this.incrementButtonClick}*/
onClick={
() => {
此.incrementButton单击（“测试”）；
}
}
className=“btn btn主要”>
增量<
/按钮><
br/>
<
/反应。片段>
);
}
递增按钮单击（e）{
console.log（“单击增量按钮”，e）；
console.log（this.state.count）；
这是我的国家({
计数：this.state.count+1
});
}
递增双击（）{
log（“双击增量按钮”，此按钮）；
}
getspan类（）{
返回this.state.count==0？
“徽章警告m-2”：
“徽章信息m-2”；
}
getMethod（）{
var值=（）=>{
log（“values”，this.props.value）；
};
}
formatCount（）{
常数{
计数
}=本州；
返回计数===0？“零”：计数；
}
}
函数App（）{
报税表（<
计数器值={
1.
}
/>
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）

我可能会将其重新表述为应该在构造函数内部初始化。如果您在
构造函数中使用
道具
，则不需要使用
此
。您可以直接执行此操作
count:props.value，
我可能会将其改写为应该在构造函数内初始化的状态。如果您在
构造函数中使用
props