Блог

Главная - Вопросы по программированию - Итерация объектов внутри объектов в react

Итерация объектов внутри объектов в react

#reactjs

#reactjs

Вопрос:

У меня есть эти объекты внутри объектов, которые я хотел повторить в react

 const [PersonInfo, setPersonInfo] = useState({
 {name: "Juan", address: "Street1"},
 {name: "Kristine", address: "Street2"}
}

Я попытался отобразить его в react с помощью

 return (
  <div>
    {{Object.keys(PersonInfo).map(key => 
        <option value={key}>{PersonInfo[key]}</option>
      )}
  </div>
)

Но он показывает только первое значение, которое равно Juan . Что не так с моим кодом?

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

1. Первый фрагмент имеет неправильный синтаксис.

2. данные, которые вы передаете useState , недействительны, и код не будет выполняться. Пожалуйста, покажите какой-нибудь рабочий пример.

3. @GabrielePetrioli значение по умолчанию в useState равно {}. и я добавляю новый объект, используя setPersonInfo({…PersonInfo, имя: «Juan», адрес: «street1», })

Ответ №1:

У вас есть синтаксические ошибки, вместо этого вам следует сохранить array insde your useState и выполнить цикл над ним, используя .map 

 const [personsInfo, setPersonsInfo] = useState([
  {name: "Juan", address: "Street1"},
  {name: "Kristine", address: "Street2"}
])

После этого вы можете отобразить его следующим образом:

   return (
    <select name="personAddress">
      {personsInfo.map(person => {
        return (
          <option key={person.name} value={person.address}>{person.name}</option>
         )
      })}
    </select>
  );

В этом примере предполагается, что у каждого пользователя есть уникальное имя. Поэтому key={person.name} .