Как сделать увеличение числа?

Question

[testtoster]

Подскажите, как сделать так, чтобы по щелчку на кнопку count к числу прибавлялась единица?

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

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
      count: 0,
    }
  }

  showText = () => {
    console.log('button work');
    this.setState({ text: 'button work' });
  }

  showCount = () => {
    this.setState({ count: '11' });
  }

  render() {
    return (
      <div>
        <button onClick={this.showText}>Push1</button>
        <p>{this.state.text}</p>
        <button onClick={this.showCount}>Count</button>
        <p>{this.state.count}</p>
      </div>
    )
  }
}

export default App;

Answer 1

[Сергей Сунцев]

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

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: '',
      count: 0,
    }
  }

  showText = () => {
    console.log('button work');
    this.setState({ text: 'button work' });
  }

  showCount = () => {
    this.setState({ count: this.state.count + 1});
  }

  render() {
    return (
      <div>
        <button onClick={this.showText}>Push1</button>
        <p>{this.state.text}</p>
        <button onClick={this.showCount}>Count</button>
        <p>{this.state.count}</p>
      </div>
    )
  }
}

export default App;

( -__ -)

Comments

[testtoster]

Спасибо)

[testtoster]

Подскажите, а почему конструкция ++ не работает в данном контексте?

[Сергей Сунцев]

++ это сокращение от присваивания и увеличения на 1
В реакте нельзя изменять состояние, кроме как через setState.

[testtoster]

Сергей Сунцев, спасибо еще раз))

[Islam Ibakaev]

testtoster,
Перерисовывать следует, когда изменилось состояние. Чтобы определить изменение, нужно производить сравнение текущего дерева с новым(потенциально отличающимся).
Когда вы сохраняете значение в переменную, под значение выделяется память, само значение сохраняется в некую "ячейку"(обретает свой адрес), ссылку на которую получает переменная, которой это значение присваивается.
Вложенность может быть достаточно серьёзная и сравнивать два дерева(свойство к свойству) дорого. Поэтому реакт производит ссылочное сравнение, проверяет ссылаются ли переменные(свойства) на один и тот же адрес в памяти. Если адреса те же, он игнорирует манипуляции с состоянием, если разные - перерисовывает.
Когда вы просто пишите this.state.count = this.state.count + 1, формально вы меняете состояние, но переменная та же, вы обновили содержимое ячейки, но её местоположение осталось неизменным. Получится так, что вы состояние изменили, но не сообщили реакту и он просто проигнорит ваше изменение. Чтобы его изменить "по-настоящему" вам нужно не только обновить значение, но и сохранить его в новую переменную(свойство) с тем названием(например, count). Когда у вас есть новая переменная count, старая вам уже ни к чему и вы её переопределяете с помощью this.setState().