1

Вообщем ситуация следующая:

state = {
    ingredients: {
        salad: 0,
        bacon: 0,
        cheese: 0,
        meat: 0
    }
}

addIngredientHandler = type => {
    this.setState(prevState => {
        ingredients: {
            [type]: prevState.ingredients.[type] + 1
        }
    })
}

В методе addIngredientHandler я хочу в зависимости от передаваемого параметра увеличить соответствующий счетчик в стейте. Помогите написать правильно синтаксически данную функцию.

1
  • Как минимум не хватает круглых скобок и лишняя точка
    – Alexey Ten
    25 мар 2019 в 14:39

3 ответа 3

0

Набросал для примера вот такой вариант:

import React from "react";
import ReactDOM from "react-dom";

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

    this.state = {
      ingredients: {
        salad: 0,
        bacon: 0,
        cheese: 0,
        meat: 0
      }
    };

    this.addIngredientHandler = this.addIngredientHandler.bind(this);
  }

  addIngredientHandler(e) {
    const { name } = e.target;
    this.setState({
      ingredients: {
        ...this.state.ingredients,
        [name]: this.state.ingredients[name] + 1
      }
    });
  }

  render() {
    const { bacon, salad, cheese, meat } = this.state.ingredients;
    return (
      <div>
        <h1>Ingredients!</h1>
        <button onClick={this.addIngredientHandler} name="bacon">bacon {bacon}/button>
        <button onClick={this.addIngredientHandler} name="salad">salad {salad}</button>
        <button onClick={this.addIngredientHandler} name="cheese">cheese {cheese}</button>
        <button onClick={this.addIngredientHandler} name="meat">meat {meat}</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

Использовал так называемый spread syntax для копирования свойств объекта. Вариант рабочий, просто нужно переписать немного под ваши нужды. Смысл думаю ясен. Результат:

введите сюда описание изображения

Spread syntax позволяет повторить итерацию, такую как выражение массива или строк, в местах, где ожидается ноль или больше аргументов (для вызовов функций) или элементы (для литералов массива), или выражение объекта, которое должно быть расширено в местах, где пары ключ-значение ноль или больше (для объектных литералов).

В данном случае, в приведенном примере, spread syntax (...) копирует собственные перечисляемые свойства данного объекта в новый объект.

1
  • 1
    Спасибо, разберусь с этим оператором:)
    – WhoIsDT
    25 мар 2019 в 15:03
0

Предлагаю использовать спред опреатор ... для получения текущего стейта. Далее модифицируем стейт и вызываем this.setState.

state = {
    ingredients: {
        salad: 0,
        bacon: 0,
        cheese: 0,
        meat: 0
    }
};

addIngredientHandler = type => {
    const { ingredients } = this.state;
    const newIngredients = { ...ingredients, [type]: ingredients[type] + 1 };
    this.setState({ ingredients: newIngredients });
};
1
  • Спасибо, вариант верный но я не хотел через доп массив)
    – WhoIsDT
    25 мар 2019 в 15:05
0

Object.assign() еще для копирования обьекта по ссылке. Определить в методе что менять и менять через this.setState()

1
  • я бы задумалась еще о том, откуда приходят данные в компонент (пропсы или другой метод), если пропсы то есть getDerivedStateFromProps и в нет проще менять стейт (логически) 25 мар 2019 в 15:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.