當對象鍵未知時，React 使用映射來訪問嵌套對象

Question

我正在使用 Firebase 商店開發 NextJs 項目。 我訪問一個集合並獲取一個包含帶有隨機鍵的對象的數組，並將數據作為值：

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

因為我不知道 randomdocid 的我不知道如何顯示名稱和 latinName。 我做了一個帶有問題的代碼沙盒來說明它： https ://codesandbox.io/s/spring-fast-w0tt4?file=/src/App.js:56-268

我確定這實際上很容易做到，但我似乎無法弄清楚。 希望有人知道！

謝謝，桑蒂。

Answer 1

您需要首先獲取每個對象中的鍵並返回映射中該鍵的值。 根據您在獲取數據后呈現數據的需要更新代碼。 你可以這樣做

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>
  );
}

Answer 2

您可以在此處使用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>
)}