reactjs - react.js 中的状态更改后，组件不会重新渲染

Question

我有一个电子商务应用程序，我希望购物车**中的商品数量随着用户点击加号图标而增加，但是当用户点击商品状态发生变化但组件不会因为不更新而重新渲染时购物车中的数量，但是当我刷新页面时，数量会更新

主要代码：

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;

标签： reactjsreact-hooksmern

Answer 1

该数字没有更新，因为 useState 是async。React 不会立即更新，它只是将状态更新放入队列以避免不必要的重新渲染。如果您确实需要更新，可以使用此更新功能。

例子：

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

只需在同一个点击事件中调用它。