Reactjs 如何在react中显示阵列中的产品信息？

我想为数组中的每个产品名称呈现一个div块。我从一个api获得了一个产品列表，其中包含产品名称和成本。如果我尝试列出元素，但我想将这些产品放在我创建的一个预先存在的div块中，那么下面的代码段是有效的

function Basket() {
    
     const[prods, setProds] = useState([])
    

     function refreshList(){
         
            fetch("http://localhost:60036/api/Product")
            .then(response=>response.json())
            .then(data => {
                console.log(data)
                setProds(data);
            })
        }
        
    useEffect(() => {
        refreshList()
    }, []);

return (
    <>  
    <div>
       <ul>
           {
               prods.map(prod => <li> {prod.ProductName}</li>)
           }
        </ul>
    </div>
    </>
)
}

export default Basket;

函数篮（）{
const[prods，setProds]=useState（[]
函数刷新列表（）{
取回（“http://localhost:60036/api/Product")
.then（response=>response.json（））
。然后（数据=>{
console.log（数据）
setProds（数据）；
})
}
useffect（（）=>{
刷新列表（）
}, []);
返回(

{
prods.map（prod=>
{prod.ProductName}
）
}

)
}
出口违约篮子；

上面的操作很好，可以打印产品名称和id。但是，我希望为下一个div块中的调用返回的列表中的每个产品名称创建一个篮子产品，我希望在返回中插入该列表。我现在有一些静态产品名称

<div className="basket">
    <div className="basket-product">
        <div className="item">
            <div className="product-image">
                <img src="http://placehold.it/120x166" alt="Placholder Image 2" className="product-frame" />
            </div>
            <div className="product-details">
                <h1>
                    <strong><span className="item-quantity">4</span> x Eliza J</strong> Lace Sleeve Cuff Dress
                </h1>
                <p><strong>Navy, Size 18</strong></p>
                <p>Product Code - 232321939</p>
            </div>
        </div>
        <div className="price">26.00</div>
        <div className="quantity">
            <input type="number" defaultValue="{4}" min="{1}" className="quantity-field" />
        </div>
        <div className="subtotal">104.00</div>
        <div className="remove">
            <button>Remove</button>
        </div>
    </div>
</div>

4件Eliza J蕾丝袖口连衣裙
海军蓝，尺码18

产品代码-232321939

26
104
去除

您可以像这样更新return语句

return (
  <div className="basket">
    {prods.map(prod => (
      <div key={prod.id} className="basket-product">
        {prod.ProductName} // here you can add the other jsx code aswell
      </div>
    ))}
  </div>
);

返回(
{prods.map（prod=>(
{prod.ProductName}//在这里您还可以添加其他jsx代码
))}
);

/回答：如果查看问题第二部分的div块，则有一个defaultValue=“{4}”。我现在从api获取产品信息。如果从获取的数据中有两次相同的项，我想将默认值增加1

在这种情况下，您需要过滤从响应中获得的数据列表，类似于我在下面共享的代码。过滤数据时，可以通过递增/递减将defaultValue更改为新值。一个例子

const数据=[
{id:1，名字：“面条”}，
{id:2，名称：“意大利面”}，
{id:1，名称：“面条”}
];
导出默认函数App（）{
const[prods，setProds]=React.useState（[]）；
函数刷新列表（）{
//在将API设置为组件状态之前，在此处过滤从API获得的响应数据
常量过滤器数据=数据。减少（（acc，curr）=>{
if（acc.some（（{id}）=>id==curr.id））{
返回acc；
}
加速推力（电流）；
返回acc；
}, []);
setProds（filteredData）；
}
React.useffect（（）=>{
刷新列表（）；
}, []);
返回(

{prods.map（prod=>(
{prod.name}
))}

);
}

Hi@brijesh pant。我只是想到了一些我想包括在内的东西。如果项目相同，是否可能只增加计数？让我们假设我有两次的项目。因为上面的代码将为同一行添加更多divitem@Leroi我不太明白你的问题。你能分享更多你想做的事情吗？如果你看问题第二部分的div块，有一个defaultValue=“{4}”。我现在从api获取产品信息。如果从获取的数据中有两次相同的项，我想将默认值增加1。我不知道这是否需要从react应用程序的角度或从api的角度来完成。从上面的答案中，该项被单独添加到UI上。顺便说一句，它是一种微前端架构。产品页面是在ASP.NET中开发的，购物车是在react中开发的，它们通过web api进行通信。@Leroi检查我在下面分享的答案谢谢回复。我认为如果我使用productName而不是id，这将起作用，因为在我的情况下，获取的数据中的产品可能有不同的id，但名称相同。我将检查如何获得重复产品的数量，并将其添加到默认值。Thanks@Leroi主要的事情是首先过滤数据（不管过滤逻辑是什么），然后渲染数据。

const data = [
  { id: 1, name: "Noodles" },
  { id: 2, name: "Pasta" },
  { id: 1, name: "Noodles" }
];

export default function App() {
  const [prods, setProds] = React.useState([]);

  function refreshList() {
    // filter here the response data you get from the API before setting it to component state
    const filteredData = data.reduce((acc, curr) => {
      if (acc.some(({ id }) => id === curr.id)) {
        return acc;
      }
      acc.push(curr);
      return acc;
    }, []);
    setProds(filteredData);
  }

  React.useEffect(() => {
    refreshList();
  }, []);

  return (
    <>
      <div>
        <ul>
          {prods.map(prod => (
            <li> {prod.name}</li>
          ))}
        </ul>
      </div>
    </>
  );
}