.map 问题未显示道具答案

【问题标题】：.map Issue not showing props.map 问题未显示道具
【发布时间】：2021-12-17 02:11:52
【问题描述】：

export const products = [
  {
    id: 1,
    title: "Chocotorta",
    desciption: "Torta de chocolate y dulce de leche",
    price: "$2,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} />)
    )}
  </>
);

【问题讨论】：

请详细说明您要实现的目标和无效的目标，因为所提问题未提供此详细信息。

标签： javascript reactjs array.prototype.map

【解决方案1】：

我会将map 元素重命名为itemProd 之类的，prod 在这个 sn-p 中被大量使用。话虽如此，您并没有将任何内容传递给<Item />，您的 sn-p 应该类似于：

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

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

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

【讨论】：

【解决方案2】：

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

然后像这样将变量放在你的回报中：

 {items}

【讨论】：

【解决方案3】：

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

export const products = [
      {
        id: 1,
        title: "Chocotorta",
        desciption: "Torta de chocolate y dulce de leche",
        price: "$2,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} />)
        )}
      </>
    );

【讨论】：