React.js：无法读取未定义的属性“ myProp”

Question

注意：此处是新手。这个问题看似微不足道，但对我来说似乎很难。

我正在修改Reactjs Tutorial，在那里我陷入了一个非常琐碎的问题。

function Square(props) {
  return (
    <button className="square"> {props.value} </button>
  );
}

class Board extends React.Component {

  renderSquare(i) {
    return <Square />;
  }

  render() {
    return (
      <div className="status">{this.props.printStatus()}</div>
    );
  }
}

export default class Game extends React.Component {

// COnstructor
constructor(props) {
  super(props);
  this.state = {
    myProp: 'Hi'
  }
}

// Gets gameplay status
getStatus() {
  return this.state.myProp;  // error coming here
}

  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board printStatus={this.getStatus}/>
        </div>
      </div>
    );
  }
}

TypeError: Cannot read property 'myProp' of undefined这行出现错误：

这意味着组件myProp的{​​{1}}内部的属性state无法访问或不被读取。 可能是什么问题？

Answer 1

您需要将this绑定到getStatus中的constructor函数。

constructor(props) {
  super(props);
  this.state = {
    myProp: 'Hi'
  };
  this.getStatus = this.getStatus.bind(this);
}

https://gist.github.com/fongandrew/f28245920a41788e084d77877e65f22f

Answer 2

这是因为直接将this.getStatus传递到子组件将丢失其调用者（此）。相反，您可以传递它的“包装版本”。

此闭包将保留getStatus的调用方，从而返回正确的值。

function Square(props) {
  return (
    <button className="square"> {props.value} </button>
  );
}

class Board extends React.Component {

  renderSquare(i) {
    return <Square />;
  }

  render() {
    return (
      <div className="status">{this.props.printStatus()}</div>
    );
  }
}

class Game extends React.Component {

// COnstructor
constructor(props) {
  super(props);
  this.state = {
    myProp: 'Hi'
  }
}

// Gets gameplay status
getStatus() {

  return this.state.myProp;
}

  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board printStatus={() =>  this.getStatus()}/>
        </div>
      </div>
    );
  }
}

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

<div id="root">
     
</div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

Answer 3

或者您可以将getStatus定义为箭头函数：

getStatus = () => this.state.myProp

查看以下内容：https://medium.com/byte-sized-react/what-is-this-in-react-25c62c31480