使用 React 在單個卡中渲染 Object 數據

Question

我正在嘗試將對象數組中的數據渲染到多張卡片中，但是 React 僅渲染頁面上第一個 Object 中的數據。 有什么方法可以做到這一點？

const dogData = [
    {
        id: 1,
        name: "Hollie",
        breed: "Doberman",
        age: 3,
    },
    {
        id: 2,
        name: "Charles",
        breed: "Golden Retriever",
        age: 4,

    }
]

export default dogData

import React from "react";
import dogData from "./dogData";

function DogCardsDisplayed() {
  for (let i = 0; i < dogData.length; i++) {
    return (
      <>
        <div>{dogData[i].name}</div>
        <div>{dogData[i].breed}</div>
        <div>{dogData[i].age}</div>
      </>
    );
  }
}

function SearchPage() {
  return (
    <div>
      <DogCardsDisplayed />
    </div>
  );
}

export default SearchPage;

Answer 1

渲染數組的正確方法。

1. 始終使用 map。
2. 不要忘記每個項目都有鑰匙

function DogCardsDisplayed() {
    return dogData.map(item=> (
      <div key={item.id}>
        <div>{item.name}</div>
        <div>{item.breed}</div>
        <div>{item.age}</div>
      </div>
    ));
}

Answer 2

這應該是你的答案：

function DogCardsDisplayed(props) {
  return (
    <div>
      {Object.keys(props.dog).map((key) => (
        <div>{dog[key]}</div>
      ))}
    </div>
  );
}

function SearchPage() {
  return (
    <div>
      {dogData.map((dog) => (
        <DogCardsDisplayed content={dog} />
      ))}
    </div>
  );
}

export default SearchPage;