Javascript Can'；我们是否在React.js中的数组中迭代材质ui？

我一直在尝试使用MaterialUI，并在数组中对其进行迭代（用于为某些项目（如电子商务网站）创建评级）。代码不起作用。在我的本地主机服务器上，它根本没有显示任何星星。在我将其动态化之前，它工作得很好，然后我根据将道具添加到我的功能组件以使其动态化。其他一切都很好，只是它不接受数组中的矩阵ui图标供我迭代。此外，import声明说“虽然它被导入，但它的值永远不会被读取”

我的代码：Product.js：

import React from "react";
import "./Product.css";
import StarRateIcon from "@material-ui/icons/StarRate";

function Product({ id, title, image, price, rating }) {
  return (
    <div className="product">
      <div className="product_info">
        <p>{title}</p>
        <p className="product_price">
          <small>$</small>
          <strong>{price}</strong>
        </p>
        <div className="product_rating">
          {Array(rating)
            .fill()
            .map((_, i) => (
              <p StarRateIcon className="star" />
            ))}
        </div>
      </div>
      <img src={image} alt="" />
      <button>Add to Basket</button>
    </div>
  );
}

export default Product;

从“React”导入React；
导入“/Product.css”；
从“@material ui/icons/StarRate”导入星号图标；
功能产品（{id，title，image，price，rating}）{
返回(
{title}


$
{price}

{数组（额定值）
.fill（）
.map（（u，i）=>(

))}
加入篮子
);
}
导出默认产品；

My home.js文件：

import React from "react";
import "./Home.css";
import Product from "./Product";

function Home() {
  return (
    <div classname="home">
      <div className="home_container">
        <img
          className="home_image"
          src="https://m.media-amazon.com/images/G/01/digital/video/sonata/US3P_JOKER_IMAGE_ID/be07783e-2738-4aaf-b90c-d0ec474d15ae._UR3000,600_SX1500_FMwebp_.jpg"
        />
        <div className="home_row">
          <Product
            id="890778"
            title="Description"
            price={99.99}
            image="https://m.media-amazon.com/images/I/71BGLa7IFtL._AC_UY218_.jpg"
            rating={5}
          />
          <Product />
        </div>
      </div>
    </div>
  );
}

export default Home;

从“React”导入React；
导入“/Home.css”；
从“/Product”导入产品；
函数Home（）{
返回(
);
}
导出默认主页；

---

救人！我可以使用表情符号片段，但我真的希望它能起作用。我已导入StarateIcon并使用它。它不起作用。

看起来您不小心在图标组件名称前面加了一个“p”。当它应该是

时，您有

，您正在呈现一个

p

标记，其中没有包含无效属性的内容，

StarRateIcon

。这就是你没有看到任何渲染的原因。如果检查HTML，很可能会看到

p

标记。您还可能在控制台中看到有关无效属性的错误。您的代码应该如下所示：

Array(rating).fill().map(() => <StarRateIcon className="star" />)

Array（rating）.fill（）.map（（）=>）