Мое приложение аварийно завершает работу, когда я использую циклы for или while

Я начал изучать реакцию. Я делаю это очень простое приложение. Поэтому я сделал кнопку уменьшения, но я хочу, чтобы эта кнопка работала только тогда, когда количество элементов больше или равно нулю. Я пытался использовать циклы 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

Итак... где в этом коде циклы для или пока?

squeekyDave 14.03.2019 14:36

Извините, я вставил неправильный код, исправлю через секунду.

giantmario 14.03.2019 14:38

Вот что я пытаюсь сделать. Цикл while в функции handleDecrement...

giantmario 14.03.2019 14:41

Почему вы используете цикл while, а не оператор if? Кажется более разумным.

DTul 14.03.2019 14:41

@Paradigm, пожалуйста, поделитесь логами

KOTIOS 14.03.2019 14:42

Я верю. может быть неправильным, но структурируйте свои методы, как этот handelDecrement() {} , помните, что это внутри стрелочной функции ведет себя по-разному. Также, как упоминал @DTul, вам не нужно зацикливаться.

squeekyDave 14.03.2019 14:43

@DTul ты прав! Как я это пропустил... такая глупая ошибка. Спасибо!

giantmario 14.03.2019 14:45

setState не выходит за пределы цикла, поэтому он остается с вашим текущим номером «count» и его inf-циклом

Tomal 14.03.2019 14:45

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

giantmario 14.03.2019 14:46
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
9
198
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Допустим, 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})

Vencovsky 14.03.2019 14:48

да теперь понимаю. Я не знаю, как я пропустил такое простое решение. Спасибо!

giantmario 14.03.2019 14:49

Другие вопросы по теме