如何渲染类型为对象数组的 React Hook 状态？

Posted 2023-02-22

【中文标题】如何渲染类型为对象数组的 React Hook 状态？

【英文标题】：How to render a React Hook State whose type is an Array of Objects?

【发布时间】：2020-01-20 18:27:30

【问题描述】：

我正在尝试渲染存储在 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 子对象无效（找到：带有键 name, number 的对象）。如果您打算渲染一组子项，请改用数组。

我尝试了以下方法：

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

但是当我尝试这样做时，我会收到相同的错误消息。

如何渲染状态中的对象？

【参考方案1】：

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

虽然上面的答案显示了如何展开和渲染嵌套对象，但您可能希望最终设置嵌套字段并操纵状态并有效地完成它。看看Hookstate，它是增压的 useState 钩子，它简化并加快了复杂/嵌套状态的管理。例如这里是类似的demo。 （免责声明：我是该项目的作者）

【参考方案2】：

您仍在尝试渲染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>
  )

【讨论】：

谢谢，我明白了。为什么 React 不允许你直接渲染对象？

object 应该如何在 html 元素中呈现？只有原语...您可以尝试 JSON.stringify() 呈现对象的字符串表示

@boxcarcoder 渲染器无法猜测复合类型应该如何显示。

我的措辞再好不过了