Question

我想从状态渲染数字，但是当我单击按钮时，什么也没有发生。我该如何解决？

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++会改变状态，我们绝对不能直接改变状态（https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly）。

还要注意，setState是异步的，并且这种带有计数器更新的代码可能会失败。您可能会在here和docs中找到有关其异步性质的很好的解释。

考虑到这一点，使用setState()的形式是一个好习惯，该形式接受函数而不是像这样的对象：

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

Answer 2

如评论中所述，this.state.sec++首先将返回this.state.sec的实际值，然后再递增其值。另外，如果您的新状态取决于旧状态，则recommended在setState

中使用更新程序功能

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

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

2 个答案: