Выбор количества не работает в Гэтсби Не удалось скомпилировать - PullRequest
Новая
       7

Выбор количества не работает в Гэтсби Не удалось скомпилировать

2 голосов
/ 24 сентября 2019

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

. / Src / components / QuantityPicker.js Ошибка модуля (из ./node_modules/eslint-loader/index.js):

/ Users / tolleyl / Documents / strangedonuts /strange-donuts / src / components / amountPicker.js 18:36 предупреждение Неожиданное помеченное выражение
без меток 18:36 предупреждение 'значение:' определено, но никогда не используется
нет-неиспользованных меток 18:43 Ожидается ошибкавызов присваивания или функции и вместо этого увидел выражение no-unused-expression

✖ 3 проблемы (1 ошибка, 2 предупреждения) 0 ошибок и 1 предупреждение, которые потенциально можно исправить с помощью опции --fix.

Мой код указан ниже.

import React from 'react'
import "../components/qty-picker.scss"

class Quantity extends React.Component {
    constructor(props) {
      super(props);

      this.state = {value : 1}
      this.increment = this.increment.bind(this);
      this.decrement = this.decrement.bind(this);
    }

    increment() {
      this.setState(prevState => {value: ++prevState.value});
    }

    decrement() {
      this.setState(prevState => { value: prevState.value > 0? --prevState.value : 0});
    }

    render() {

      return (
        <div>
          <p>
          Set the quantity
         </p>
        <div className="quantity-input">
          <button className="quantity-input__modifier quantity-input__modifier--left" onClick={this.decrement}>
            &mdash;
          </button>
          <input className="quantity-input__screen" type="text" value={this.state.value} readonly />
          <button className="quantity-input__modifier quantity-input__modifier--right" onClick={this.increment}>
            &#xff0b;
          </button>  
        </div>  
        </div>
      );
    }
}

export default Quantity;

1 Ответ

1 голос
/ 25 сентября 2019

При использовании функций со стрелками вам следует помнить о разнице между () => {...}, который выполняет код между фигурными скобками, и () => ({...}), который возвращает объект, описанный в скобках.

В вашем случае изменениеsetState строк до this.setState(prevState => ({ ... })) решит проблему.

Примечание. Добавлено в качестве ответа после намека на решение в комментариях.

...