Console.log打印增量值,但按钮中未更新值
'use strict';
const e = React.createElement;
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { val: 0 };
}
render() {
return e(
'button',
{
onClick: () => {
this.state.val = this.state.val + 1
console.log(this.state.val)
}
},
'Like' + this.state.val // here Like 1 should be displayed
);
}
}
const domContainer = document.querySelector('#root');
ReactDOM.render(e(Counter), domContainer);
答案 0 :(得分:3)
永远不要直接更新状态。始终使用setState
this.state.val = this.state.val + 1; // bad
this.setState((state) => ({ // good
val: state.val + 1
}))
否则,React将不会“看到”更新,也不会重新呈现。
答案 1 :(得分:1)
您必须使用setState
来更新状态。状态更新是异步调用,因此您必须使用回调功能来检查天气存储是否已更新。
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { val: 0 };
this.updateState = this.updateState.bind(this);
}
updateState(){
this.setState({val : this.state.val + 1 }, function(){
console.log(this.state.val)
})
}
render() {
return e(
'button',
{
onClick: () => {this.updateState()
}
},
'Like' + this.state.val
);
}
}
答案 2 :(得分:1)
您必须通过this.setState()
函数更新React状态。否则,该组件将不会重新渲染。这是React的基础。您应该阅读更多React文档或做一些教程。
您可以阅读更多here!