从数组状态 reactjs 更改数据

Question

将产品添加到购物车时，它可以添加 quantity.after 添加购物车我也想从 cart.but 更改数量它不会改变我需要的任何东西set state.how 的变化我可以解决这个问题吗？非常感谢帮助

cart.jsx

 const Store = () => {
    const [listData, setListData] = useState({ lists: [] });
   

    useEffect(() => {
        const fetchData = async () => {
            const token = JSON.parse(localStorage.getItem('Token'));
            const body ={token}
            const result = await axios.post(
                'http://localhost:4000/store/cart',body);
            setListData({ lists: result.data });
        };
        fetchData();
    }, []);


   
  
  const onChangeProductData = (e) => {
    setListData({
        ...listData,
        [e.target.name]: e.target.value
    })
    
}


    
    
   
 
  const itemsPrice =  listData.lists.reduce((a, c) => a + c.quantity * c.product_price, 0);;
  const totalPrice = itemsPrice;
  
    return (
        <div className="store">
        <div className="header">
          <a href="/store" className="logo">Milk.Lk</a>
          <div className="menu">
            <div className="dropdown">
              <button className="dropbtn">Category</button>
              <div className="dropdown-content">
                <a href="/freshmilk">FreshMilk</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
            </div>
            <a href="/login">Contact us</a>
          </div>
          <div className="header-right">
            <a href="/register">SingUp</a>
            <a href="/login">Login</a>
          </div>
        </div>
        <div className="container">    
        <div className="cart">
               
        {listData.lists.length === 0 && <div>Cart is empty</div>}
                    {listData.lists.map((current, i) => (
                      
                       <div className='product-cart container'>
        
        
                         <div className="colm1" ><img key={i} className='product-cart-img' src={`http://localhost:4000/uploads/${current.image}`} alt='' /></div>
        
        <div className="colm2" ><a >{current.product_name}</a></div>
        <div className="colm3"><div class="form-group mx-sm-4 mb-2">

<select class="form-control " name="quantity" onChange={onChangeProductData} value={current.quantity} >
  <option value='1'>1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

{current.product_price}

去掉 ))} 总价 ${totalPrice}

        </div>
        </div>
        
    );
                      
}

export default Store;

Answer 1

您想更新特定产品的数量，但您正在更新 listData 对象，以解决此问题

首先你需要将一些标识符传递给 onChangeProductData 如果每个产品上都有 id 你可以传递它或传递索引

<select class="form-control " name="quantity" onChange={(ev) => onChangeProductData(ev, i)} value={current.quantity} > // here you can pass some id as well instead of index

现在

const onChangeProductData = (e, i) => {
    const list = [...listData];
    list[i] = {
        ...list[i],
        [e.target.name]: e.target.value
    }
    setListData({
        ...listData,
        list
    })    
}

以上更改将解决您的问题：

建议： listData 应该是 -

const [listData, setListData] = useState([]);

从数组状态 reactjs 更改数据

change data from array state reactjs

arrays

state

onchange

reactjs