React и умное изменение стейта

Question

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

Есть стейт:

  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}) 
    // А тут мы подставляем то что получили, но это не работает
}

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

Answer 1

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

БЛОГ НА HUSL

React и умное изменение стейта

Ответы (1 шт):