.map 问题不显示道具

Question

export const products = [
  {
    id: 1,
    title: "Chocotorta",
    desciption: "Torta de chocolate y dulce de leche",
    price: ",40",
    imgDesc: "",
    imgUrl: ""
  }
];

const Item = (prod) => {
  return (
    <>
      <Card key={prod.id}>
        <CardImg alt={prod.imgDesc} src={prod.imgUrl} top width="100%" />
        <CardBody>
          <CardTitle tag="h5">{prod.title}</CardTitle>
          <CardSubtitle className="mb-2 text-muted" tag="h6">
            {prod.price}
          </CardSubtitle>
          <CardText>{prod.desciption}</CardText>
          <Button>Mostrar detalle</Button>
        </CardBody>
      </Card>
    </>
  );
};

return (
  <>
    {loading ? (
      <div style={spinnerStyle}>
        <Spinner color="primary" size="">
          .
        </Spinner>
      </div>
    ) : (
      products.map((prod) => <Item prod={products} />)
    )}
  </>
);

Answer 1

我会将 map 元素重命名为 itemProd 或其他名称，prod 在该代码段中用得很多。也就是说，您没有将任何内容传递到 <Item />，您的代码段应该类似于：

products.map((itemProd) => <Item prod={itemProd} />)

编辑：实际上看起来您也需要这样做：

const Item = ({prod}) => {...}

Answer 2

 const items =
    products.map((item) => {
        return (<Item prod={item} key={item.id} />)
    })
;

然后像这样将变量放入 return 中：

 {items}

Answer 3

您好，我想这就是您要找的东西

export const products = [
      {
        id: 1,
        title: "Chocotorta",
        desciption: "Torta de chocolate y dulce de leche",
        price: ",40",
        imgDesc: "",
        imgUrl: ""
      }
    ];
    
    const Item = ({prod}) => {
      return (
        <>
          <Card>
            <CardImg alt={prod.imgDesc} src={prod.imgUrl} top width="100%" />
            <CardBody>
              <CardTitle tag="h5">{prod.title}</CardTitle>
              <CardSubtitle className="mb-2 text-muted" tag="h6">
                {prod.price}
              </CardSubtitle>
              <CardText>{prod.desciption}</CardText>
              <Button>Mostrar detalle</Button>
            </CardBody>
          </Card>
        </>
      );
    };
    
    return (
      <>
        {loading ? (
          <div style={spinnerStyle}>
            <Spinner color="primary" size="">
              .
            </Spinner>
          </div>
        ) : (
          products.map((product) => <Item prod={product} key={product.id} />)
        )}
      </>
    );

.map 问题不显示道具

.map Issue not showing props

javascript

reactjs

array.prototype.map