为什么 Next.js Json.map 不能正常工作？

Question

我想构建一个简单的组件，其中数据来自 JSON 列表。在网站上我可以看到console.log(dat.CardId)，所以它只适用于console.log()。我看不到来自.map 函数的卡片。风格是引导式的。我真的不认为代码有问题。

import { Card,Button,Container,Row,Col } from 'react-bootstrap'
    
const data = [{'CardTitle':'Simple Website','CardText':"Some quick example text to build on the card title and make up the bulk of the card's content.", "CardId":"Simple-Website"},{'CardTitle':'Simple Website','CardText':"Some quick example text to build on the card title and make up the bulk of the card's content.", "CardId":"Simple-Website"} ]

export default function Cards() {
    return (
        <>
            <div>
                <Container fluid>
                    Cards
                    {data.map(dat => {
                        {console.log(dat.CardId)}
                        <Row>
                            <Col>    
                                <Card style={{ width: '18rem' }}>
                                    <Card.Img variant="top" src="pexels-tima-miroshnichenko-6612358 (2).jpg/100px180" />
                                    <Card.Body>
                                        <Card.Title>{dat.CardTitle}</Card.Title>
                                        <Card.Text>
                                            {dat.CardText}
                                        </Card.Text>
                                        <Button variant="primary">Go somewhere</Button>
                                    </Card.Body>
                                </Card>
                            </Col>
                        </Row>
                    })}
                </Container>
            </div>         
        </>
    )
}   

Answer 1

在.map 中使用return ( ... ) 来渲染元素。 https://stackoverflow.com/a/39999745/15257712

示例：

array.map((entry, index) => {
  return (
    <div key={index}>
      ...
    </div>
  )
})