[英]React JS state doesn't update on click
My showroom component is as follows : 我的陈列室组件如下:
export default class Showrooms extends React.Component {
constructor(props){
super(props);
this.state = {
blockView: true
};
}
handleChangeView(view){
console.log(view);
this.setState({blockView: view});
}
render(){
const language = this.props.language;
return (
<div className="col-lg-10 col-md-9 col-sm-9 col-xs-12 text-center">
<div className="lists">
<div className="listsTitle">{language.portal.introPageTitle}</div>
<ViewBar handleChangeView={this.handleChangeView.bind(this)}/>
<div className="allLists">
<div className="view">
{this.props.allLists.map( (list, i) => <View key={i} list={list} language={language} blockView={this.state.blockView}/>)}
<div className="clearfix"/>
</div>
</div>
<div className="clearfix"/>
</div>
</div>
);
}
}
and my viewBar component is as follows : 和我的viewBar组件如下:
export default class ViewBar extends React.Component {
constructor(props){
super(props);
this.state = {
blockView: true
};
}
setBlockView(event){
event.preventDefault();
this.setState({blockView: true}, this.props.handleChangeView(this.state.blockView));
}
setListView(event){
event.preventDefault();
this.setState({blockView: false}, this.props.handleChangeView(this.state.blockView));
}
render(){
let blockViewAddBorder = this.state.blockView ? "activeView" : "";
let listViewAddBorder = !this.state.blockView ? "activeView" : "";
return (
<div className="viewBar">
<Link to="" onClick={this.setListView.bind(this)} className={`listViewIcon ${listViewAddBorder}`}>
<FontAwesome name="list" className="portalFaIcon"/>
</Link>
<Link to="" onClick={this.setBlockView.bind(this)} className={blockViewAddBorder}>
<FontAwesome name="th-large" className="portalFaIcon"/>
</Link>
</div>
)
}
}
In viewBar component I have two onClick functions where I update the state and the I call an function from showroom component to update the state. 在viewBar组件中,我有两个onClick函数,它们在其中更新状态,并从显示组件中调用一个函数以更新状态。
Depending on that state I change the way how I display the content. 根据状态,我可以更改显示内容的方式。
But the problem is, when the function setListView is called first time, the state doesn't change to false. 但是问题是,第一次调用setListView函数时,状态不会更改为false。 When I second time call setListView then it sets the state to false. 当我第二次调用setListView时,它将状态设置为false。
this.props.handleChangeView
function is an callback function, and it should be called after the state is updated. this.props.handleChangeView
函数是一个回调函数,应在状态更新后调用它。
Any advice? 有什么建议吗?
Second argument in setState
should be function
setState
第二个参数应为function
this.setState({ blockView: true }, () => {
this.props.handleChangeView(this.state.blockView);
})
in your example, you pass result to setState
from handleChangeView
在您的示例中,您将结果从handleChangeView
传递给setState
this.setState({
blockView: true
}, this.props.handleChangeView(this.state.blockView));
handleChangeView
returns nothing, it means that you pass to setState
undefined handleChangeView
返回任何内容,这意味着您将undefined传递给setState
this.setState({
blockView: true
}, undefined);
so you don't call handleChangeView
after setState
所以你不要在setState
之后调用handleChangeView
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.