Блог

Главная - Вопросы по программированию - Как установить ключ объекта внутри объекта состояния в React Hooks

Как установить ключ объекта внутри объекта состояния в React Hooks

#javascript #object #react-hooks #spread

#javascript #объект #реагирующие перехватчики #распространение

Вопрос:

Как я могу обновить объект состояния react hooks, который имеет вложенный объект, содержащий объекты с индексными ключами?

Вот объект состояния по умолчанию.

   const [form, setForm] = useState({
      name:'',
      price:'',
      effects:{
          0:{},
          1:{},
      }

  })

Моя цель — обновить первый ключ в объекте эффектов.
Я пробовал некоторый подобный код.

 const variable = "Sleepy"
const variableObject = {[variable]:0} 
setForm({...form, ...{...form.effects, ...{0:{ variableObject }} }  })

Эта попытка помещает объект за пределы вложенного объекта эффектов следующим образом.

 {
  0:{"Sleepy":0},
  1:{},
  name:'',
  price:'',
  effects:{
    0:{},
    1:{},
  } 
}

Вместо этого конечное состояние объекта должно выглядеть следующим образом.

 {
  name:'',
  price:'',
  effects:{
    0:{"Sleepy":0},
    1:{},
  } 
}

Ответ №1:

Как насчет:

 form.effects[0].Sleepy = 0;
setForm({...form});

Комментарии:

1. Окончательное использование с вашим ответом… onSelect={(_, x) => ((form.effects[0][x.value] = 0),(setForm({...form})))}

Ответ №2:

Решение, которое вы ищете, выглядит примерно так,

             ...form,
            effects:{
                ...form.effects,
                0: {...variableObject}
            }
        })

оператор spread инвертирует упаковку объекта, чтобы открыть его наизнанку.
Таким образом, открыв слой, мы могли напрямую обращаться к парам ключ-значение.
.
Кроме того, есть еще один подход, который может помочь вам в долгосрочной перспективе.

     setForm((oldForm)=>{ 
        return oldForm.effects.0 = variableObject 
    })

Обратите внимание, что вы также можете использовать сокращенную нотацию, чтобы уменьшить объем кода, который вы можете написать. Здесь я включил предложение return, чтобы прояснить работу setState с обратным вызовом.
В любом случае, вот сокращенное обозначение.
setForm((oldForm)=> oldForm.effects.0 = variableObject)
.
Хорошего дня

Метки: