gpt4 book ai didi

reactjs - 使用 React 将状态值加一

转载 作者:行者123 更新时间:2023-12-03 13:07:21 25 4
gpt4 key购买 nike

在 React 中,我试图让按钮增加状态中存储的值。但是,使用下面的函数代码,在使用handleClick 时,我的值设置为未定义或NaN。

class QuestionList extends React.Component {
constructor(props) {
super(props);
this.state = {value: 0};

// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}

handleClick = (prevState) => {
this.setState({value: prevState.value + 1});
console.log(this.state.value)
}

你能告诉我为什么会发生这种情况吗?根据此处的文档,它应该是正确的: https://facebook.github.io/react/docs/state-and-lifecycle.html

最佳答案

因为您错误地使用了handleClick函数。这里:

handleClick = (prevState) => { .... }

prevState 将是传递给handleClick函数的事件对象,您需要将prevState与setState一起使用,如下所示:

handleClick = () => {
this.setState(prevState => {
return {count: prevState.count + 1}
})
}

另一个问题是,setState 是异步的,因此 console.log(this.state.value) 不会打印更新后的状态值,您需要将回调函数与 setState 一起使用。

查看有关async behaviour of setState的更多详细信息以及如何检查更新后的值。

检查工作解决方案:

class App extends React.Component {

constructor(props){
super(props);
this.state={ count: 1}
}

onclick(type){
this.setState(prevState => {
return {count: type == 'add' ? prevState.count + 1: prevState.count - 1}
});
}

render() {
return (
<div>
Count: {this.state.count}
<br/>
<div style={{marginTop: '100px'}}/>
<input type='button' onClick={this.onclick.bind(this, 'add')} value='Inc'/>
<input type='button' onClick={this.onclick.bind(this, 'sub')} value='Dec'/>
</div>
)
}
}

ReactDOM.render(
<App />,
document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='container'></div>

关于reactjs - 使用 React 将状态值加一,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42364838/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com