React JS状态不会在点击时更新

React JS state doesn't update on click

本文关键字：更新 JS 状态 React      更新时间：2023-09-26

我的showroom组件如下:

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>
    );
}
}

和我的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>
    )
}
}

在viewBar组件中，我有两个onClick函数，其中我更新状态，我从陈列室组件调用一个函数来更新状态。

根据这个状态，我改变了显示内容的方式。

但是问题是，当函数setListView第一次被调用时，状态不会改变为false。当我第二次调用setListView时，它将状态设置为false。

this.props.handleChangeView函数是回调函数，应该在状态更新后调用。

任何建议吗?

setState中的第二个参数应该是function 

this.setState({ blockView: true }, () => {
   this.props.handleChangeView(this.state.blockView);
})

在您的示例中，您将结果从handleChangeView传递给setState 

this.setState({
  blockView: true
}, this.props.handleChangeView(this.state.blockView));

handleChangeView没有返回，这意味着你传递给setState undefined 

this.setState({
  blockView: true
}, undefined);

所以你不能在setState之后调用handleChangeView

相关文章：