在使用map()函数后，如何使用语义ui React以行格式排列卡片？

Question

当你对卡片进行硬编码时，效果很好，而且它们是以行的形式存在的，但是当我尝试使用map函数对它们进行迭代时，却无法正常工作，请帮助我。

  const BodyComponent = (props) => {

    const [ restaurants, setRestaurants ] = useState([
      {name: "Rolex Guy Entebbe", },
      {name: "Cafe Java Victoria Mall", },
      {name: "KFC Vicatoria Mall", },
      {name: "Niki's Pizzeria", },
      {name: "muti Restaurant", },
    ])

    return(
      <Container style={{ marginTop: "35px" }}>
        <div>
          {
            restaurants.map(restaurant => 
            <Card.Group itemsPerRow={4} stackable>
              <CardComponent />
            </Card.Group>
            )
          }       
        </div>
      </Container>
    )
  }

  export default BodyComponent

Answer 1

看了一下文档，似乎你想做的是 map Card 而不是 Card.Group:

return(
      <Container style={{ marginTop: "35px" }}>
        <div>
            <Card.Group itemsPerRow={4} stackable>
            {
              restaurants.map(restaurant => 
                <CardComponent />
              )
            }  
            </Card.Group>     
        </div>
      </Container>
);

你还需要(很可能)将一些道具传递给 CardComponent:

<CardComponent restaurant={restaurant} />