Реагировать JS состояние не обновляется по щелчку

Question

Мой компонент салон выглядит следующим образом:

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 Функция является функцией обратного вызова, и ее следует вызывать после обновления состояния.

Любые советы?

Answer 1

Второй аргумент в setState должен быть function

в вашем примере, вы передаете результат setState из handleChangeView

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

handleChangeView возвращает ничего, это значит, что вы передаете setState неопределенных

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

, поэтому вы не звоните handleChangeView после setState