12345

import “./styles.css”;
import React, { useState, useEffect } from ‘react’;

const Form = () => {
const [products, setProducts] = useState([]);
const [totalPrice, setTotalPrice] = useState(0);
const [modifyNumber, setModifyNumber] = useState(false);

const [inputNumberValue, setInputNumberValue] = useState(0);

// 使用useEffect钩子在组件加载时获取商品列表数据
useEffect(() => {
fetchData();
}, []);

// // 获取商品列表数据的函数
// const fetchData = async () => {
// // 调用API接口获取商品数据
// const response = await fetch(‘your-api-url’);
// const data = await response.json();
// setProducts(data);
// };

// 获取商品列表数据的函数
const fetchData = async () => {
// 调用API接口获取商品数据
const data = [{
id:0,
name:‘zhangsan’,
number:1 ,
price :11.00
},
{
id:1,
name:‘zhangsan’,
number:2 ,
price :13.00
}
]
setProducts(data);
};

// 更新商品数量并调用API接口更新单个商品的价格
const updateQuantity = async (index, quantity) => {
if(quantity>=0){
const updatedProducts = […products];
updatedProducts[index].number = quantity;
setProducts(updatedProducts);

  // 调用API接口更新单个商品的价格
  // const response = await fetch('your-price-api-url', {
  //   method: 'POST',
  //   body: JSON.stringify({ productId: updatedProducts[index].id, quantity }),
  // });
  // const data = await response.json();

   //  updatedProducts[index].price = data.price
  // 更新商品的价格
  updatedProducts[index].price = (Math.random()*100).toFixed(2)
  setProducts(updatedProducts);
}

};

// 计算总价的函数
useEffect(() => {
let totalPrice = 0;
products.forEach((product) => {
if (product.selected) {
// totalPrice += product.price * product.number;

    totalPrice += Number( product.price)
  }
});
setTotalPrice(totalPrice);

}, [products]);

// // 修改inputnumber的值并统一修改表格商品的数量的处理函数
// const handleInputNumberChange = (value) => {
// setInputNumberValue(value);
// if (modifyNumber) {
// const updatedProducts = products.map((product) => ({
// …product,
// number: value,
// }));
// setProducts(updatedProducts);
// }
// };

// 修改inputnumber的值并统一修改表格商品的数量的处理函数
const handleInputNumberChange = async (value) => {
setInputNumberValue(value);
const updatedProducts = products.map((product) => ({
…product,
number: value,
}));
setProducts(updatedProducts);

// test1
// Promise.all(
// products.map(async (product) => {
// const response = await fetch(‘your-price-api-url’, {
// method: ‘POST’,
// body: JSON.stringify({ productId: product.id, quantity: product.number }),
// });
// const data = await response.json();
// return { id: product.id, price: data.price };
// })
// ).then((updatedPrices) => {
// const updatedProducts = products.map((product) => {
// const updatedPrice = updatedPrices.find((price) => price.id === product.id);
// return { …product, price: updatedPrice.price };
// });
// setProducts(updatedProducts);
// });

// // 创建一个Promise数组，用于存放所有商品的询价请求
// const pricePromises = updatedProducts.map((updatedProduct) =>
// fetch(‘your-price-api-url’, {
// method: ‘POST’,
// body: JSON.stringify({ productId: updatedProduct.id, quantity: updatedProduct.number }),
// }).then((response) => response.json())
// );

// // 执行所有的询价请求，并更新商品的价格
// // [{price:10}, {price:11}]
// const newPrices = await Promise.all(pricePromises);
// const updatedProductsWithPrice = updatedProducts.map((updatedProduct, index) => ({
// …updatedProduct,
// price: newPrices[index].price,
// }));
// setProducts(updatedProductsWithPrice);

// // Mock
// let newPrices = []
// for(let i = 0;i // newPrices.push({
// price:(Math.random()*100).toFixed(2)
// })
// }

// const updatedProductsWithPrice = updatedProducts.map((updatedProduct, index) => ({
// …updatedProduct,
// price: newPrices[index].price,
// }));
// setProducts(updatedProductsWithPrice);
};

return (

type=“checkbox”
checked={modifyNumber}
onChange={async(e) => {
if (e.target.checked) {
await handleInputNumberChange(10)
}

                setModifyNumber(!modifyNumber);
              }}
            />

{
modifyNumber&& handleInputNumberChange(e.target.value)} />
}

  
      {products.map((product, index) => (
        
      ))}
    

    

      

        
Name
        
Price
        
Number
        
Select
      
    
    

          
{product.name}
          
{product.price}
          

             updateQuantity(index, Number(product.number) - 1)}>-
            {product.number}
             updateQuantity(index, Number(product.number) + 1)}>+
          
          

             {
                const updatedProducts = [...products];
                updatedProducts[index].selected = !updatedProducts[index].selected;
                setProducts(updatedProducts);
              }}
            />
          
        
  

  

    Total Price: {totalPrice}
  

);
};

export default function App() {
return (

); }