如何在react JS中使用map函数？我无法使用映射函数来运行循环来循环组件代码。我怎样才能运行它？

Question

App.js具体代码：

<Container>
        <Row>
          {blog.map((v, i) => (
            <ProductItems key={i} blog={v}/>
          ))}
        </Row>
      </Container>

function ProductItems() {
  return (
    <Col lg="3" md="6">
      <Card >
        <Card.Img variant="top" src="placeholder.js/100px180" />
        <Card.Body>
          <Card.Title>Card Title</Card.Title>
          <Card.Text>
            Some quick example text to build on the card title and make up the bulk of the card's content.
          </Card.Text>
          <Button variant="primary">Go somewhere</Button>
        </Card.Body>
      </Card>
    </Col>
  );
}

blog.jsx代码：

export let blog = [
    {
      "blog": [
        {
          "userId": 1,
          "id": 1,
          "title": "are or do repels provide blacked out to accept the option criticizes",
          "body": "because and accepts\naccepts the result of refusal convenient and when which is all\nof our things, but they are the thing that will happen to the architect"
        },
        {
          "userId": 1,
          "id": 2,
          "title": "who is to be",
          "body": "is of things at the time of life\nthey are nothing to follow let the pain of the blessed rebuke those pains and not run away from the caresses of the pleasure, nor any trouble"
        },
        {
          "userId": 1,
          "id": 3,
          "title": "who is to be",
          "body": "is of things at the time of life\nthey are nothing to follow let the pain of the blessed rebuke those pains and not run away from the caresses of the pleasure, nor any trouble"
        },
        {
          "userId": 1,
          "id": 4,
          "title": "who is to be",
          "body": "is of things at the time of life\nthey are nothing to follow let the pain of the blessed rebuke those pains and not run away from the caresses of the pleasure, nor any trouble"
        },
        {
          "userId": 1,
          "id": 5,
          "title": "who is to be",
          "body": "is of things at the time of life\nthey are nothing to follow let the pain of the blessed rebuke those pains and not run away from the caresses of the pleasure, nor any trouble"
        },
        {
          "userId": 1,
          "id": 6,
          "title": "who is to be",
          "body": "is of things at the time of life\nthey are nothing to follow let the pain of the blessed rebuke those pains and not run away from the caresses of the pleasure, nor any trouble"
        }
      ]
    }
  ]

{描述：blog.jsx 包含 json 代码和我尝试通过地图函数循环的对象。 App.js 文件包含 ProductItems 组件和函数以及映射函数。}

我尝试重复 ProductItems 代码，因为它有卡代码。并期待这个结果并没有发生。

Answer 1

更正您的对象声明。你添加了一些不必要的东西。

代替：

export let blog = [{
"blog": [....]
}]

应该是：

export let blog = [{
"userId": 1,
"id": 1,
"title": "...",
"body": "...."
}];

为了你的对象

blog[0]?.blog?.map((blog)=>{ 
 return <ProductItems key={blog?.id} blog={blog}/> 
})

这会起作用