如何在反应中显示数组中的产品信息？

Question

我想为数组中的每个产品名称呈现一个 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;

上面的效果很好，可以打印产品名称和 ID。但是，我希望为从以下 div 块中的调用返回的列表中的每个产品名称创建一个 basket-product，我想在返回中插入该 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>

Answer 1

你可以像这样更新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>
);

Answer 2

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

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

https://codesandbox.io/s/tender-hamilton-w5plf?file=/src/App.js

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>
    </>
  );
}