时间戳

首页 > 解决方案 > 在反应中迭代对象内的对象

reactjs - 在反应中迭代对象内的对象

问题描述

我在我想在反应中迭代的对象中有这个对象

const [PersonInfo, setPersonInfo] = useState({
 {name: "Juan", address: "Street1"},
 {name: "Kristine", address: "Street2"}
}

我试图在反应中使用

return (
  <div>
    {{Object.keys(PersonInfo).map(key => 
        <option value={key}>{PersonInfo[key]}</option>
      )}
  </div>
)

但它只显示第一个值是 Juan。我的代码有什么问题？

标签： reactjs

解决方案

您有语法错误，您应该做的是保存array在您的内部useState并使用循环遍历它.map

const [personsInfo, setPersonsInfo] = useState([
  {name: "Juan", address: "Street1"},
  {name: "Kristine", address: "Street2"}
])

之后，您可以像这样渲染它：

  return (
    <select name="personAddress">
      {personsInfo.map(person => {
        return (
          <option key={person.name} value={person.address}>{person.name}</option>
         )
      })}
    </select>
  );

这个例子假设每个人都有一个唯一的名字。因此key={person.name}.

推荐阅读