我在更改 state 时遇到了一些问题

Question

我想从 state 渲染数字，但是当我单击按钮时没有任何反应。 我怎么能解决这个问题？

class App extends Component {
        state = {
            hours: 0,
            min: 0,
            sec: 0
        }

handleClick = () => {
    this.setState({
        sec: this.state.sec++
    })
}

render() {
    return (
        <div>
            <main className="time-change">
                <form>
                    <h2>{this.state.hours}:{this.state.min}:{this.state.sec}</h2> 
                </form>
                <button onClick={this.handleClick}>^</button>
            </main>
        </div>
    )
}

}

Answer 1

this.state.sec++ mutates the state, and we should never mutate the state directly ( https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly ).

另请注意， setState是异步的，这样带有计数器更新的代码可能会失败。 您可以在此处和文档中找到关于其异步特性的很好的解释。

考虑到这一点，最好使用接受 function 而不是 object 的setState()形式，例如：

handleClick = () => {
    this.setState(prevState => ({
        sec: prevState.sec + 1
    }));
}

Answer 2

正如评论中提到的this.state.sec++将首先返回this.state.sec的实际值，然后增加它的值。 此外，如果您的新 state 依赖于旧 state， 建议在setState中使用更新程序 function

this.setState((prevState) => {
    sec: prevState.sec + 1
});