Как отобразить React Hook State, тип которого является массивом объектов?

Question

Я пытаюсь отобразить массив объектов, хранящихся в состоянии React Hook, в котором хранятся имена и номера для телефонной книги:

const App = () => {
  const [ persons, setPersons] = useState([
    { name: 'Arto Hellas', number: '000-000-0000' },
    { name: 'Ada Lovelace', number: '39-44-5323523' },
    { name: 'Dan Abramov', number: '12-43-234345' },
    { name: 'Mary Poppendieck', number: '39-23-6423122' }
  ]); 

  return (
    <div>
      <h2>Phonebook</h2>
      <div>{persons}</div>
    </div>
  )
}

Однако я получаю следующую ошибку:

Объекты недопустимы как дочерние элементы React (найдено: объект с ключами {имя, номер}).Если вы хотите визуализировать коллекцию дочерних элементов, используйте вместо этого массив.

Я пробовал следующее:

Я подумал, создав <div> для каждого индекса массива.Я могу визуализировать каждый в отдельности, а не весь массив одновременно, но это не проблема.

const App = () => {
  const [ persons, setPersons] = useState([
    { name: 'Arto Hellas', number: '000-000-0000' },
    { name: 'Ada Lovelace', number: '39-44-5323523' },
    { name: 'Dan Abramov', number: '12-43-234345' },
    { name: 'Mary Poppendieck', number: '39-23-6423122' }
  ]); 

  return (
    <div>
      <h2>Phonebook</h2>
      <div>{persons.map(person => <div> {person} </div>)}</div>
    </div>
  )
}

Но когда я пытаюсь это сделать, я получаю то же сообщение об ошибке.

Как я могу отобразить объекты в состоянии?

Answer 1

Вы все еще пытаетесь отрендерить object.Вам необходимо получить доступ к properties

const App = () => {
  const [ persons, setPersons] = useState([
    { name: 'Arto Hellas', number: '000-000-0000' },
    { name: 'Ada Lovelace', number: '39-44-5323523' },
    { name: 'Dan Abramov', number: '12-43-234345' },
    { name: 'Mary Poppendieck', number: '39-23-6423122' }
  ]); 

  return (
    <div>
      <h2>Phonebook</h2>
      <div>{persons.map(person => <div key={person.name}> {person.name} </div>)}</div>
    </div>
  )
}