Question

我向我的朋友展示了几个星期前创建的程序，当我向他展示代码时，他向我提到我“状态设置不正确”。我的代码工作正常，所以我请他澄清一下这是什么意思。他说，我设定状态的方式是非常规的，也不是设定状态的正确方法。当时我并没有考虑太多，但是最近我一直想提高我的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

本质上这不是一个大问题，但是如果您希望进行改进，则更新状态的传统方式与以前的状态有些不同。

问题是，状态更新可能是异步的，有时会做出反应，将多个setState（）调用分批处理到单个状态更新中。这就是为什么您不显式传递旧状态就不能依赖状态的先前值的原因。

例如，您要根据状态的“当前”值来增加头和尾的计数。进行这样的事情的一种完全可靠的方法：-

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

如果以这种方式设置状态，则可以放心，无论React如何批处理其setState调用，您的状态值都不会过时。

Documentation

对于我如何错误地设置状态感到困惑

1 个答案: