setState() объекта внутри объекта с переменной

#reactjs

Вопрос:

Я пытаюсь setState() найти объект, который находится внутри объекта, но с переменной в качестве ключа.

 const [student, setStudent] = useState({
   Bob: {id: 1, food: "carrot"},
    
   Dave: {id: 2, food: "potato"},
    
   Emily: {id: 3, food: "apple"}
});
 

переменной randomStudent может быть Боб, Дейв или Эмили

 setStudent(prev => ({...prev, [randomStudent].food : "steak"}))
 

Приведенный выше код, похоже, не работает, как я могу это исправить?

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

1. как насчет этого [randomStudent]['food'] = "steak" ?

Ответ №1:

У вас неверный синтаксис. Вы не можете обновить ни одно свойство, как вы пытаетесь сделать. Вместо этого сделайте что-то вроде следующего:

 setStudent(prev => ({
  ...prev,
  [randomStudent]: {
    ...prev[randomStudent], // spread (shallow copy) the original
    food : "steak"          // update the property you want
  }
}));
 

Это, очевидно, намного более подробно, но все же необходимо. Если вы хотите получить лучший опыт, вы можете попробовать Immer.

Ответ №2:

Вам необходимо указать объект в значении при использовании оператора распространения

 
setStudent(prev => ({...prev, [randomStudent]: {id: 1, food : "steak"} }))

 

Или

 setStudent(prev => {
  prev[randomStudent].food = 'steak';
  return {...prev}
})