如何呈现类型为对象数组的 React Hook 状态？

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>
  )
}

但是我收到以下错误：

Objects are not valid as a React child (found: object with keys {name, number}). If you meant to render a collection of children, use an array instead.

我试过以下方法：

我想通过为数组的每个索引创建 <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>
  )
}

Answer 2

对象没有默认渲染器。您可以呈现对象的 JSON 序列化，例如 <div>{JSON.stringify(persons)}</div>。但这很可能不是你想做的。

虽然上面的答案显示了如何展开和呈现嵌套对象，但您可能希望最终设置嵌套字段并操纵状态并高效地完成它。查看 Hookstate, it is supercharged useState hook which simplifies and speeds up management of complex / nested states. For example here is the similar demo。（免责声明：我是该项目的作者）

如何呈现类型为对象数组的 React Hook 状态？

How to render a React Hook State whose type is an Array of Objects?

arrays

state

javascript-objects

reactjs

react-hooks