Я начал изучать реакцию. Я делаю это очень простое приложение. Поэтому я сделал кнопку уменьшения, но я хочу, чтобы эта кнопка работала только тогда, когда количество элементов больше или равно нулю. Я пытался использовать циклы while и for, но мое приложение вылетает, когда я использую циклы. Какие-нибудь советы? Спасибо!
Вот мой код:
import React, { Component } from 'react';
class Cart extends Component {
state = {
count: 0,
message: ""
};
handleIncrement = () => {
this.setState({count: this.state.count + 1});
}
handelDecrement = () => {
while(this.state.count > 0){
this.setState({count: this.state.count - 1})
}
}
handleStopShopping = () => {
this.setState({message: this.state.message + "Thank you for your trust! Come back again."})
}
render() {
return (
<div>
<h5>Use plus sign to add items to your cart, or use the minus sign to delete items from your cart.</h5>
{/*Printing the count*/}
<span className = {this.getBadgeClasses()}>{this.showCount()}</span>
{/*Increment Button*/}
<button onClick = {this.handleIncrement} className = {this.incrementButton()}>+</button>
{/*Decrement Button*/}
<button onClick = {this.handelDecrement} className = {this.decrementButton()}>-</button> <br></br>
{/*Info about how much items is in the cart*/}
<h5><p className = "badge badge-info">{this.itemInfo()}</p></h5>
<button onClick = {this.handleStopShopping} className = "btn btn-danger btn-sm">Stop Shopping</button> <br></br>
<h5><p className = "badge badge-dark">{this.state.message}</p></h5>
</div>
);
}
showCount(){
let {count} = this.state;
return count <= 0 ? count = "Zero" : count;
}
incrementButton(){
let btnClasses = "btn m-2 btn-sm btn-";
btnClasses += this.state.count > 0 && this.state.count < this.state.count ? "dark" : "outline-dark";
return btnClasses;
}
decrementButton(){
let btnClasses = "btn btn-sm btn-";
btnClasses += this.state.count === 0 && this.state.count < this.state.count ? "dark" : "outline-dark";
return btnClasses;
}
itemInfo(){
let itemMessage = "You have " + this.showCount() + " item/s in your cart";
return itemMessage;
}
getBadgeClasses(){
let badgeClasses = "badge m-2 badge-";
badgeClasses += this.state.count <= 0 ? "warning" : "primary";
return badgeClasses;
}
}
export default Cart
Извините, я вставил неправильный код, исправлю через секунду.
Вот что я пытаюсь сделать. Цикл while в функции handleDecrement...
Почему вы используете цикл while, а не оператор if? Кажется более разумным.
@Paradigm, пожалуйста, поделитесь логами
Я верю. может быть неправильным, но структурируйте свои методы, как этот handelDecrement() {} , помните, что это внутри стрелочной функции ведет себя по-разному. Также, как упоминал @DTul, вам не нужно зацикливаться.
@DTul ты прав! Как я это пропустил... такая глупая ошибка. Спасибо!
setState не выходит за пределы цикла, поэтому он остается с вашим текущим номером «count» и его inf-циклом
Вы, ребята, правы, когда я думаю об этом сейчас, я чувствую себя таким глупым, ха: D, может быть, я провел слишком много времени, глядя в монитор ... не видел простого решения



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Допустим, count = 5.
Если вы используете
while(this.state.count > 0){
this.setState({count: this.state.count - 1})
}
он выполнит код в блоке 5 раз перед завершением.
То, что вы ищете, это утверждение if.
if (this.state.count > 0){
this.setState({count: this.state.count - 1})
}
ТАКЖЕ
Вызов setState в вашем цикле происходит асинхронно, поэтому count может быть любым числом от 1 до 5 и вызываться много раз, что, вероятно, вызывает сбои.
вы можете добавить await, и тогда он не будет вызываться много раз. await this.setState({count: this.state.count - 1})
да теперь понимаю. Я не знаю, как я пропустил такое простое решение. Спасибо!
Итак... где в этом коде циклы для или пока?