Question

当对象键未知时，React 使用 map 访问嵌套对象

2021-11-09

1086

javascript reactjs

我正在使用 Firebase Store 开发 NextJs 项目。我访问一个集合并获取一个数组，其中包含具有随机键的对象，并将数据作为值：

const data = [
  {
    randomdocid67233: {
      name: "ABC",
      latinName: "DEF" 
    }
  },
  {
    randomdocid6d7dddd233: {
      name: "GHI",
      latinName: "JKI" 
    }
  }
];

因为我不知道 randomdocid，所以我无法弄清楚如何显示名称和 latinName。我制作了一个带有问题的 codesandbox 来说明它： https://codesandbox.io/s/spring-fast-w0tt4?file=/src/App.js:56-268

我确信这实际上很容易做到，但我似乎无法弄清楚。希望有人知道！

谢谢， Santi。

Answer 1

您可以使用 Object.keys() 作为解决方案

{data.map((item, index)=> {
   let key=Object.keys(item)[0]

    return <div key={key}> // better to use unique key value then index
        {item[key].latinName} 
    </div>
)}

Answer 2

您需要先获取每个对象内的键，然后返回映射中该键的值。根据需要更新代码，以便在获取数据后呈现数据。您可以这样做

export default function App() {
  const data = [
    {
      randomdocid67233: {
        name: "ABC",
        latinName: "DEF"
      }
    },
    {
      randomdocid67233: {
        name: "GHI",
        latinName: "JKI"
      }
    }
  ];

  const newData = data.map(item => {
    const key = Object.keys(item)[0];
    return item[key]
  })

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {newData.map((item, index) => (
        <div key={index}>
          {item.name} {item.latinName}
        </div>
      ))}
    </div>
  );
}