javascript - useState 没有立即更新数组

问题描述

我正在构建一个购物车应用程序，如果有重复，我想防止一个项目出现在购物车页面上两次。我正在尝试从 useState 钩子中检查一组项目对象。如果数组中包含一个带有项名的对象，我想防止它被添加两次，否则我想将它推入数组中。但是当我控制台记录数组时，它不会立即更新。此外，在我两次点击 ProductsDetails.jsx 上的“addItemToCart”按钮后，我收到一个错误“TypeError: Cannot read property 'find' of undefined”。对不起，如果我没有解释清楚。这是我的代码。任何帮助，将不胜感激。

应用程序.js

function App() {
  const [cartItems, setCartItems] = useState([]);
  const [cartCount, setCartCount] = useState(0);
  const [cartTotal, setCartTotal] = useState(0.00);

  return (
    <div className="App">
      <BrowserRouter>
        <NavigationBar count={cartCount} />
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route exact path="/products" component={ProductsPage} />
          <Route exact path="/about" component={AboutPage} />
          <Route exact path="/profile" component={ProfilePage} />
          <Route
            exact
            path="/cart"
            render={() => {
              return (
                <CartPage
                  setCartCount={setCartCount}
                  cartItems={cartItems}
                  cartTotal={cartTotal}
                  cartCount={cartCount}
                />
              );
            }}
          />
          <Route
            exact
            path="/:details"
            render={() => (
              <ProductDetails
                cartItems={cartItems}
                setCartItems={setCartItems}
                setCartCount={setCartCount}
                setCartTotal={setCartTotal}
              />
            )}
          />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

ProductsDetail.jsx



import React from "react";
import "./ProductDetails.css";
import { useLocation } from "react-router-dom";
const ProductDetails = (props) => {
  const location = useLocation();
  const products = JSON.parse(localStorage.getItem("data"));
  const productInfo = products.find(
    (item) => item.name === location.state.name
  );
  const { name, image, price } = productInfo;

  const cartCounter = (counter) => {
    props.setCartCount((counter += 1));
  };

  const cartPriceCounter = (counter) => {
    props.setCartTotal((counter += price));
  };

  const addItemToCart = () => {

    const product = {
      name,
      price,
    };

    if(!props.cartItems.find(e => e.name === product.name)){
      props.setCartItems([...props.cartItems, product]);
    }

   console.log(props.cartItems)
  };



  return (
    <div className="details-container">
      <div className="details-card">
        <img className="details-img" src={image} alt={name} />
        <div className="details-div">
          <h3 className="details-title">{name}</h3>
          <p className="details-price">${price}</p>
          <button
            className="add-to-cart"
            onClick={() => {
              props.setCartCount(cartCounter);
              props.setCartTotal(cartPriceCounter);
              props.setCartItems(addItemToCart);
            }}
          >
            Add To Cart
          </button>
        </div>
      </div>
    </div>
  );
};

export default ProductDetails;

标签： javascriptreactjsreact-hooks

javascript - useState 没有立即更新数组

问题描述

解决方案

推荐阅读