Javascript 正在尝试更新react中计数器的状态

很久没有和React合作了。刚刚回到它，并试图更新状态。据我所知，我应该能够使用下面的方法更新状态。然而，它并没有更新年龄的价值。我错过什么了吗

import React from 'react';
import logo from './logo.svg';
import './App.css';

class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      age: 0
    }

    this.increaseAge = this.increaseAge.bind(this)
  }

  increaseAge=()=> {
    this.setState({
      age: this.state.age + 1
    })

    console.log("hi")
  }


  render() {
    return(
      <div className="app-content">
        <h1>Hey Ninjas</h1>
        <p>{this.state.age}</p>
        <button onClick={this.icreaseAge}>Increment</button>
      </div>
    );
  }
}

export default App;

---

你有一个打字错误，你漏掉了递增中的字母n

现在应该可以了

        <button onClick={this.increaseAge}>Increment</button>

---

你有一个打字错误，你漏掉了递增中的字母n

现在应该可以了

        <button onClick={this.increaseAge}>Increment</button>

你的单字打错了。否则它应该可以正常工作

<button onClick={this.increaseAge}>Increment</button>

你的单字打错了。否则它应该可以正常工作

<button onClick={this.increaseAge}>Increment</button>

---

作为旁注，您不应该通过访问组件状态的方式来更新状态，而是通过以下方式：

increaseAge = () => {
  this.setState((state) => ({ age: state.age + 1 }));
  // or shorter
  this.setState(({ age }) => ({ age: age + 1 }));
}

您的实现出现问题的原因是React的状态更新是异步的，并且可以批处理，因此您的年龄更新最终可能会被其他一些setState调用覆盖，然后最终被错误地更新

---

您可以查看。

作为旁注，您不应该通过访问组件状态的方式来更新状态，而应该通过以下方式：

increaseAge = () => {
  this.setState((state) => ({ age: state.age + 1 }));
  // or shorter
  this.setState(({ age }) => ({ age: age + 1 }));
}

您的实现出现问题的原因是React的状态更新是异步的，并且可以批处理，因此您的年龄更新最终可能会被其他一些setState调用覆盖，然后最终被错误地更新

---

您可以查看。

顺便说一句，我知道我不需要绑定函数，因为我使用的是arrow函数。但我只是在尝试所有可能的方法控制台是否正在记录hi？我在您的onClick中看到是this.icreaseAge而不是this.increaseAge顺便说一句，我知道我不需要绑定函数，因为我使用的是arrow函数。但我只是在尝试所有可能的方法控制台是否正在记录hi？我在你的一次点击中看到是这个。icreaseAge而不是这个。IncreaseAge谢谢，是打字错误！谢谢，是打字错误！