Question

嗨，我对ReactJS中的'this'关键字感到困惑。我在这里有以下代码，用于在React中提供一个简单的计数器。

import React, { Component } from "react";
import ReactDOM from "react-dom";

class ButtonClass extends React.Component {
  constructor(props) {
    super(props);
    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
    this.state = { count: 0 };
  }
  increment() {
    this.setState({ count: this.state.count + 1 });
  }
  decrement() {
    this.setState({ count: this.state.count - 1 });
  }
  render() {
    const showCountStatus = this.state.count;
    return (
      <div>
        <p>Click to increrment the button</p>
        <button onClick={this.increment}>Increment</button>
        <button onClick={this.decrement}>Decrement</button>
        <h1>{showCountStatus}</h1>
      </div>
    );
  }
}

export default ButtonClass;

ReactDOM.render(<ButtonClass />, document.getElementById("root"));

但是，如果我将递增和递减函数更改为：

increment() {
    this.setState({ count: count+ 1 });
  }
  decrement() {
    this.setState({ count: count-1 });
  }

  Count is not defined error is shown

关于为什么的任何建议？谢谢

Answer 1

如错误消息所述，没有定义count变量。

据我了解，您似乎想从以前的状态加1。
然后，您可以获得对先前状态的引用，并使用该值加一。

 increment() {
    this.setState(prevState => ({ count: prevState.count+ 1 }));
  }
  decrement() {
    this.setState(prevState => ({ count: prevState.count-1 }));
  }

有关prevState来自何处以及如何使用的更多详细信息，请参见State Updates May Be Asynchronous。

Answer 2

该代码无效，因为count，count + 1中的count - 1不是来自this.state对象count的键。 JS试图在函数范围内找到变量定义，但没有找到它并抛出正确的错误。

因此，要访问状态对象密钥count，您总是需要像this.state.count那样写它。

此关键字在reactJs中

2 个答案: