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子对象无效（找到：带有键{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>
  )
}

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

如何在状态下渲染对象？

Answer 1

您仍在尝试渲染db.sequelize = sequelize; db.Sequelize = Sequelize; db.User = require('./user')(sequelize, Sequelize); db.Post= require('./Post')(sequelize, Sequelize); db.User.hasMany(db.Post); db.Post.belongsTo(db.User);。您需要访问它的object

properties

Answer 2

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

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

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

2 个答案: