Блог

Главная - Вопросы по программированию - состояние не обновляется по нажатию кнопки

состояние не обновляется по нажатию кнопки

#reactjs

Вопрос:

Я хочу сделать a boolean true одним нажатием кнопки, но он показывает «неопределенный» на console.log 

 export default class productdetail extends Component {
   constructor(props){
    super(props);
    this.state = {
        showCartMessage:false ,
    }
    this.handleCartListener = this.handleCartListener.bind(this);
   
   }
    handleCartListener(){
    this.setState({ showCartMessage: true });
    console.log(this.showCartMessage)
    }
    actionForProducts(product) {
      return(
         <div className="">
            <button className="add_cart btn  rounded-pill w-100  " onClick= 
                 {this.handleCartListener}>
            Add To Cart
           </button>
        </div>
      )
    }
    render(){
       return(
          <div className="p-3 h-100 ">
             {this.actionForProducts(this.props.productdetail)}
        </div>
       )
    }
}

Как это решить? Я пробовал так много раз, но это дает один и тот же ответ.

Ответ №1:

showCardMessage-это свойство переменной состояния. Не экземпляр класса.

  console.log(this.state.showCartMessage)

Ответ №2:

Состояние было обновлено должным образом. вы должны просто использовать this.state.showCartMessage , чтобы увидеть изменения.

вы можете использовать функцию обратного вызова для проверки состояния после обновления.

 handleCartListener(){
 this.setState({ showCartMessage: true }, ()=>{console.log(this.state.showCartMessage) });
}

Ответ №3:

Если вы хотите поставить console.log для проверки новое значение state . Вы должны поместить его в render (), потому что состояние имеет новое значение только при повторной визуализации компонента

 render(){
  console.log(this.state.showCartMessage)
}

Комментарии:

1. это работает для меня, но в первом клике это дает мне ложь в консоли, а затем дает истину

Ответ №4:

попробуйте работать с асинхронным ожиданием, у меня была та же проблема, значение обновляется, но консоль.журнал показывает неопределенное состояние, пока при следующем щелчке он не отобразит предыдущее состояние. Попробуйте это :

  async handleCartListener(){
    await this.setState({ showCartMessage: true });
    console.log(this.showCartMessage)
    }

Ответ №5:

вы должны использовать setState обратного вызова

 handleCartListener(){
    this.setState({ showCartMessage: true },()=>{
    console.log(this.state.showCartMessage)
});
    
}
Метки: