Reactjs 有没有办法让两个状态在两次精准渲染中更新

我正在try 使用react.js制作Electron 商务购物车，我遇到了以下问题.

const [item, setItems] = useState([]);
const [price, setPrice] = useState(0);


....

const CartItem = (props) => {
        const { img, title, id, price, obj, product1 } = props;
        // obj is counter for the initial number of the item that is 
        // being passed from the parent component
        const [counter, setCounter] = useState(obj);

        

        

        function increment() {
            setPrice(price);
            setCounter((prev) => prev + 1);
            let arr = JSON.parse(localStorage.getItem("cart"));
            arr.push(product1);
            localStorage.setItem("cart", JSON.stringify(arr));
        }

        function decrement() {
            let arr = JSON.parse(localStorage.getItem("cart"));
            let index = -1;
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].title === title) {
                    index = i;
                    break;
                }
            }
            if (index != -1) {
                arr.splice(index, 1);
                setCounter((prev) => prev - 1);
                setPrice((pre) => pre - price);

                localStorage.setItem("cart", JSON.stringify(arr));
            }
        }

        return (
            <div className="p">
                <div className="cartr">
                    {" "}
                    <Link to={`/e-commerce-project/products/${id}`}>
                        <img src={img} alt="" className=" cart-img" />
                    </Link>
                </div>
                <div className="titlee"> {title}</div>
                <div className="cart-price">price : ${price}</div>
                <button className="add-button" onClick={increment}>
                    +
                </button>
                <div className="quantity"> quantity : {counter}</div>
                <button className="remove-button" onClick={decrement}>
                    -
                </button>
            </div>
        );
    };

此代码块用于增加和减少添加到购物车中的商品，然后更改价格，但仅当我使用它时 更新项目编号也在更新但在刷新后显示的价格.

有没有解决这个问题的好办法？

我仍然不熟悉react 钩子，所以请原谅我的错误.

我试着寻找解决方案，结果发现两个状态在一个渲染中被更新.