Блог

у меня есть приложение для электронной коммерции, я хочу, чтобы количество товара в торговых тележка** должна быть увеличена, как пользователь нажимает на значок плюса , но когда пользователь нажимает на изменения состояния элемента, но компонент не повторно отображает там не обновляется количество количество в корзину , но когда я обновить страницу номеру обновляется

основной код:

 const [item, setItems] = useState([]);

useEffect(() => {

    setItems(items);
  
  }, []);

const handlePlus = (number, index) => {
    let Nnumber = (number  = 1);

        let changeitems = item;
    
        changeitems[index].qty = Nnumber;
    
        setItems(changeitems);
    
        localStorage.setItem("items", JSON.stringify(changeitems));
      };
 

JSX:

 <span  onClick={(e) => {
                            handlePlus(eachItem.qty, index);
                          }}
                        >
                          <i className="bi bi-plus-circle-fill text-success"></i>{" "}
                        </span>
 

Полный код

 import { Fragment, useState, useEffect } from "react";

const Cartitemscreater = ({ items ,cartUpdater}) => {


  


  const [total, setTotal] = useState(0);

  const [item, setItems] = useState([]);
  const [available,setAvailable] = useState(true)

  useEffect(() => {

    setItems(items);
  let totalPr = 0;
    for (let index = 0; index < items.length; index  ) {
      let price = parseInt(items[index].productprice);

      totalPr  = price * items[index].qty;
    }
    setTotal(totalPr);
  }, []);





  let changeItems = []

  const handlePlus = (number, index) => {
    let Nnumber = (number  = 1);

    changeItems = item;

    changeItems[index].qty = Nnumber;

    setItems(changeItems);

    localStorage.setItem("items", JSON.stringify(changeItems));




  };





  const handleMinus = (number, index) => {
    let Nnumber = (number -= 1);

    let changeitems = item;

    changeitems[index].qty = Nnumber;

    setItems(changeitems);

    localStorage.setItem("items", JSON.stringify(changeitems));


  };
const  handleDelete  = (_id,index)=>{

let deleteState = []

for (let index = 0; index < item.length; index  ) {
if(item[index]._id!==_id){

  deleteState.push(item[index])
}
  
}

setItems(deleteState)
cartUpdater(deleteState.length)
if(deleteState.length===0){

  setAvailable(false)

return localStorage.removeItem("items")
}

  localStorage.setItem("items",JSON.stringify(deleteState))



}
 return (
    <Fragment>
      { available ?<div className="container my-5">
     
 <div className="table-responsive-xl">

          
            <table class="table  mt-5 ">
              <thead>
                <tr>
                 
                  <th scope="col">Product image</th>
                  <th scope="col">Product title</th>

                  <th scope="col">Product price</th>
                  <th scope="col">Product quantity </th>
                </tr>
              </thead>
              { item.map((eachItem, index) => {
                return (
                  <tbody key={eachItem._id} className="shadow">
                    <tr>
                      
                      <td>
                        <img
                          src={`/products/${eachItem._id}/${eachItem.prImage}`}
                          className="img-fluid imgs "
                          alt="somethings"
                          style={{
                            width: "130px",
                            height: "80px",
                            objectFit:"cover"
                          }}
                        />

<p><small className="text-muted">{eachItem.productdescription}</small></p>

<span onClick={()=>{

handleDelete(eachItem._id,index)


}}><i class="bi bi-trash fs-4 text-danger"></i></span>


                      </td>
                      <td>{eachItem.producttitle}</td>

                      <td className="fw-bold">$ {eachItem.productprice}</td>

                      <td>
                        <span
                          onClick={(e) => {
                            handleMinus(eachItem.qty, index);
                          }}
                        >
                          {" "}
                          <i className="bi bi-dash-circle-fill text-danger"></i>
                        </span>

                        <span className="mx-2"> {eachItem.qty}</span>

                        <span
                          onClick={(e) => {
                            handlePlus(eachItem.qty, index);
                          }}
                        >
                          <i className="bi bi-plus-circle-fill text-success"></i>{" "}
                        </span>
                      </td>
                    </tr>
                  </tbody>
                );
              })}
            </table>
            </div>
        
        
      </div>:          <p className="mt-lg-5 fw-bold text-danger fs-4"> {"Cart is empty "}<i class="bi bi-cart-fill"></i> </p> }
    </Fragment>
  );
};

export default Cartitemscreater;
 

Номер не обновляется, потому что состояние использования асинхронно. React не обновляет мгновенно, вместо этого он просто помещает обновление состояния в очередь, чтобы избежать ненужной повторной визуализации. Если вам действительно нужно обновление, вы можете воспользоваться этой функцией обновления.

Пример:

 const useForceUpdate = () => {
    const [value, setValue] = useState(0);
    return () => setValue((value) => value   1);
  };
 

Просто вызовите его в том же событии щелчка.