使用 Setstate 重新渲染

Question

使用 Setstate 重新渲染，记录两次，正面和反面计数器在每次点击时增加 +2 而不是 +1

 class CoinFlip extends Component {

        constructor(props) {

            super(props);

            this.state = {

                currFace: 'heads',

                flips: 0,

                counter: {

                    heads: 0,

                    tails: 0,

                },

            };

            this.flipCoin = this.flipCoin.bind(this);

        }

        flipCoin() {

            let num = Math.round(Math.random());

            let face = num === 0 ? 'heads' : 'tails';

            this.setState((st) => {

                const copy = { ...st };

                copy.flips++;

                copy.counter[face]++;

                copy.currFace = face;

                return copy;

            });

        }

        render() {

            return (

                <div>

                    <h1>Lets flip a coin</h1>

                    <Coin face={this.state.currFace} />

                    <p>

                        Out of {this.state.flips}, there have been {this.state.counter.heads}{' '}

                        heads and {this.state.counter.tails} tail

                    </p>

                    <button onClick={this.flipCoin}>Flip!</button>

                </div>

            );

        }

    }

记录时有 2 个带有双面值的复制 obj 结果

2x 控制台：计数器：{heads：2，tails：0} currFace：“heads”翻转：1

Answer 1

你试图解构一个深层对象，但解构{ ...st }只创建一个浅拷贝，即counter属性的内容仍将来自先前的状态，这在 React 中是不允许的。最简单的解决方法是复制该属性counter：&nbsp; flipCoin() {&nbsp; &nbsp; &nbsp; let num = Math.round(Math.random());&nbsp; &nbsp; &nbsp; let face = num === 0 ? 'heads' : 'tails';&nbsp; &nbsp; &nbsp; this.setState((st) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const copy = { ...st };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; copy.counter = { ...st.counter };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; copy.flips++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; copy.counter[face]++;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; copy.currFace = face;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return copy;&nbsp; &nbsp; &nbsp; });&nbsp; }或扁平化您的州的结构。