0

Друзья, добрый день.

Есть стейт:

  const [ingridients,setIngridients] = useState({
        bacon:0,
        pepper:0
    })

И есть функция, которая должна менять любой из элементов объекта, но пока меняет только pepper:

function plus(ingridient){
    setIngridients({...ingridients,pepper:ingridients.pepper+1})
}

Функция берет старое значение стейта и увеличивает в нем значение на pepper+1

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

function plus(ingridient){ //Тут в функцию приходит название ингридиента, допустим - bacon

    setIngridients({...ingridients,ingridient:ingridients.ingridient+1}) 
    // А тут мы подставляем то что получили, но это не работает
}

Позволяет ли текущая конструкция вообще подставлять в него значения?

1
  • И потом увеличивать значения ингридиентов следующим образом: <button onClick={()=>plus('pepper')}>plus</button> <button onClick={()=>plus('meat')}>plus</button> Commented 15 февр. 2021 в 10:52

1 ответ 1

1

function plus(ingridient) {
  setIngridients((prevState) => ({
    ...prevState,
    [ingridient]: prevState[ingridient] + 1
  }))
}

2
  • Cердечно благодарю вас! Commented 15 февр. 2021 в 12:40
  • Вот еще одна из возможных реализаций: setIngridients({...ingridients,[ingridient]:ingridients[ingridient] +1}) Commented 15 февр. 2021 в 12:48

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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