如何渲染类型为对象数组的 React 钩子状态?



我正在尝试渲染存储在 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>
)
}

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

如何在状态中渲染对象?

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

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

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

相关内容

  • 没有找到相关文章

最新更新