Как правильно изменить state?

Question

[Михаил Р.]

Написал первый компонент на React, но столкнулся с проблемой: после рендера, по клику значение state.prop увеличивается без проблем, но увеличить значение state.prop до рендера не получается.
Как правильно увеличить значение state.prop до рендера?

class App extends React.Component {

    constructor() {
        super();
        this.state = {prop: 1}
    }

    state_change() {
        this.setState({prop: ++this.state.prop});
    }

    render() {

        this.state_change.bind(this); // prop не был увеличен

        return <div>
            <p>{this.state.prop}</p>
            <input type="button" value="Обновить" onClick={this.state_change.bind(this)}/>
        </div>;
    }

}

ReactDOM.render(<App/>, document.getElementById('body'));

Comments

[Роман Александрович]

async state_change() {
        await this.setState({prop: ++this.state.prop});
    }

[Mikhail Osher]

Роман Александрович, тут прямая мутация стейта

[Роман Александрович]

Mikhail Osher, запомню спасибо

[Роман Александрович]

Mikhail Osher,

state_change() {
let prop = this.state.prop
        this.setState({prop: ++prop});
    }

а так тоже?

Answer 1

[Mikhail Osher]

incProp = () => {
  this.setState(state => ({
    prop: state.prop + 1,
  }));
};

render() {
  return <button onClick={this.incProp}>...</button>;
}

Answer 2

[profesor08]

В рендер функции нельзя менять стейт. Это аксиома, надо запомнить.

P.S. Можешь обойтись без биндингов.

class App extends React.Component {

    constructor() {
        super();
        this.state = {
          prop: 1,
        }
    }

    stateChange = () => {
        this.setState({
          prop: this.state.prop + 1,
        });
    }

    render = () => {
        return <div>
            <p>{this.state.prop}</p>
            <input type="button" value="Обновить" onClick={() => {this.stateChange()}}/>
        </div>;
    }

}

ReactDOM.render(<App/>, document.getElementById('body'));