使用 React 在单个卡片中呈现对象数据

Question

我正在尝试将对象数组中的数据呈现到多张卡片中，但 React 仅呈现页面上第一个对象的数据。有什么方法可以做到这一点？

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

渲染数组的正确方法。

总是使用地图。
不要忘记为每个项目准备钥匙

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;

使用 React 在单个卡片中呈现对象数据

Render Object Data in individual Cards with React

arrays

mapping

object

arrayobject

reactjs