Не понимаю, как я неправильно установил свое состояние

Question

Я показывал своему другу программу, которую создал пару недель go, и когда я показал ему код, он упомянул мне, что я «неправильно установил свое состояние». Мой код работал нормально, поэтому я попросил его пояснить, что это значит. Он сказал, что способ, которым я установил свое состояние, был нетрадиционным и неправильным. В то время я не особо об этом думал, но в последнее время я хотел улучшить свои навыки React, поэтому это вызвало у меня некоторое беспокойство.

Мне интересно, может ли кто-нибудь помочь прояснить, как я «устанавливаю свое состояние нестандартно» или как я не должен.

import React, { Component } from "react"
import Counter from "./Counter"

class Flipper extends Component {
    state = {
        headsCount: 0,
        tailsCount: 0,
        imgSrc: ""
    }

    addCounter = () => {
        var coinSide = Math.floor(Math.random() * 2)
        if (coinSide === 0){
            var newHCount = this.state.headsCount + 1
            this.setState({headsCount: newHCount, imgSrc: "https://upload.wikimedia.org/wikipedia/commons/c/cd/S_Half_Dollar_Obverse_2016.jpg"})
        }else{
            var newTCount = this.state.tailsCount + 1
            this.setState({tailsCount: newTCount, imgSrc: "http://www.pcgscoinfacts.com/UserImages/71009269r.jpg"})
        }
    }
    render(){
        return(
            <div>
                <h1>Let's flip a coin</h1>
                <img src = {this.state.imgSrc}></img>
                <button onClick = {this.addCounter}>Flip Me!</button>
                <Counter headsCount = {this.state.headsCount} tailsCount = {this.state.tailsCount}/>
            </div>
        )
    }
}

export default Flipper

Answer 1

Само по себе это не большая проблема, но если вы сделаете wi sh для улучшения, обычный способ go обновления состояния, которое так или иначе связано с предыдущим состоянием, будет немного другим.

Дело в том, что обновления состояния могут быть асинхронными и иногда реагировать пакетами на несколько вызовов setState () в одно обновление состояния. Вот почему вы не можете полагаться на предыдущее значение своего состояния без явной передачи более старого состояния.

Например, вы увеличиваете количество орлов и хвостов в зависимости от «текущего» значения штат. Полностью защищенный способ go примерно так: -

this.setState((state, props) => ({
    headsCount : state.headsCount + 1,
    imgsrc :...
});

Если вы установите свое состояние таким образом, вы можете быть уверены, что независимо от того, как React пакетирует свои вызовы setState, ваше значение состояния никогда не будет несвежий.

Документация