javascript - 该关键字不指向当前对象

Question

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

以下行错误

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;

Answer 1

您的构造函数需要接受props并且您的状态应在构造函数内初始化:

  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"]
    };
  }

class Counter extends React.Component {
  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"]
    };
  }

  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 / >
      <
      /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;
  }
}

function App() {
  return ( <
    Counter value = {
      1
    }
    />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render( < App / > , rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>