Попытка обновить состояние счетчика в реакции

Question

давно не работал с 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;

Answer 1

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

Вы получили опечатку в onClick. в противном случае все должно работать нормально.

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

Answer 2

В качестве идентификатора вам не следует обновлять state, получая доступ к компоненту state так, как вы это сделали, а скорее так:

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

Проблема с вашей реализацией возникает из-за тот факт, что обновления состояния React являются асинхронными и могут быть пакетными, так что ваше обновление age может в конечном итоге закончиться перезаписью age каким-либо другим вызовом setState и последующим неправильным обновлением.

Вы можете принять взгляните на документацию .

Answer 3

У вас есть опечатка, вы пропустили письмо (n) от increaseAge

Это должно работать сейчас.

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