为什么我使用 Bootstrap - React 每行都会得到重复的卡片？

Question

我不明白为什么我每行两次得到同一张卡。这就是我所拥有的，遵循引导程序的文档：

import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { Card, Row, Col, Container} from 'react-bootstrap';


function Post({post}) {

console.log("procedure:", post.procedure)
  return (
   
      <div>
        <Row xs={1} md={2} className="row-cols-2" >
     
          {Array.from({ length: 2 }).map((_, idx) => (
            <Col style={{ padding: '3rem' }}>
              <Card border="success" style={{ textAlign: 'center', width: '40rem', padding: '1rem' }} >
                {/* <Card.Img variant="top" src="holder.js/100px160" /> */}
                <Card.Body>
                  <Card.Title>Procedure: {post.procedure}</Card.Title>
                  <Card.Subtitle className="mb-2 text-primary"><b> Facility: </b> {post.facility.name} - Location:  {post.facility.city}, {post.facility.state}
                  </Card.Subtitle>
                  <Card.Subtitle className="mb-2 text-primary"><b> Patient cost: $</b>{post.patient_cost}</Card.Subtitle>
                  <Card.Subtitle className="mb-2 text-primary"><b> Insurance cost: $</b>{post.insurance_cost}</Card.Subtitle>
                  <Card.Subtitle className="mb-2 text-primary"><b>Date of procedure: </b>{post.date_of_procedure}</Card.Subtitle>
                  <Card.Subtitle className="mb-2 text-primary"><b>Date of invoice: </b>{post.date_of_invoice}</Card.Subtitle>
                  <Card.Text>
                  {post.comments}
                  </Card.Text>
                  <Card.Link as={Link} to={"/average"}><b>Check Average Cost </b></Card.Link>
                  <Card.Link href="#"><b>Another Link </b></Card.Link>
                </Card.Body>
                <Card.Footer>
                  <small className="text-primary"><b>Posted on: </b>{post.created_at}</small>
                </Card.Footer>
              </Card>
            </Col>
          ))}
        </Row>
      </div>
  );
}

export default Post;

我尝试添加容器，更改了几次 className，并使用了 .map()，但我仍然每行两次获得相同的卡，而不是每行两张不同的卡。基本上，我想每行有 2 张卡。不确定网格发生了什么。感谢您的帮助。

Answer 1

好的，看看这是否对您有帮助。
通过这种结构，您将有 1 行，每个帖子有 2 张卡片。

// Parent react component
div.container
// then iterate your posts right?
{
    posts.map((p, i) => {
        return(
            // Here u have 1 post right? use your Post Component
            <Post user={user} setUser={setUser} post={post} key={post.id}/>
        )
    })
}

function Post({post, user, key, setUser}) {
// Here post is a SINGLE ELEMENT right?
    return(
        div.row
        div.col-md-6 // first card - post['some property'] // Maybe here will be the user info
        div.col-md-6 // second card - post['some other property'] // maybe here will be the post info
    )

}