Question

所以我正在尝试制作一个 Web 应用程序，它从后端 API 获取产品并显示它，我还尝试实现添加到购物车的功能，该功能通过将用户添加到购物车的产品存储在其本地存储中来工作当我点击添加到购物车时，这是当前添加的 cartItems [{}] 这不是我想要的。我想存储产品的实际对象。这是我当前的代码：

import React, {useState, useEffect} from 'react'
import { Card, Button } from 'react-bootstrap'
import axios from 'axios'


function HomeScreen() {
    const [products, setProducts] = useState([])
    const [cart, setCart] = useState([])
    const [newCart, addToCart] = useState([])
    async function handleClick(id) {
        const chosen_product = axios.get(`http://localhost:8000/api/products/${id}`)
        const newCart = cart.concat(chosen_product);
        setCart(newCart);
        localStorage.setItem("cartItems", JSON.stringify(newCart));
    }
    useEffect(() => {
        async function getProducts() {
            try {
              const response = await axios.get('http://localhost:8000/api/products/');
              setProducts(response.data);
            } catch (error) {
              console.error(error);
            }
          }
       getProducts()
    },[])
    return (
        <div>
            {products.map(product => (
                <Card className="my-3 p-3 rounded" key={product.id}>
            <Card.Img src={'http://localhost:8000' + product.image} />
            <Card.Body>
            <Card.Title as="div">
                <strong>{product.name}</strong>
            </Card.Title>
            <Card.Text as="div">
            
            </Card.Text>
            <Card.Text as="h3">
            ${product.price}
            </Card.Text>
            <Card.Link>
                <Button onClick={()=>handleClick(product.id)} className="btn-primary">Add to cart</Button>
            </Card.Link>
            </Card.Body>
        </Card>
            ))}
        </div>
    )
}

export default HomeScreen

Answer 1

axios.get 返回一个需要通过 await/then,catch 解决的承诺

更新了 handleClick 函数：-

    async function handleClick(id) {
     try{
        const chosen_product = await axios.get(`http://localhost:8000/api/products/${id}`)
        const newCart = cart.concat(chosen_product);
        setCart(newCart);
        localStorage.setItem("cartItems", JSON.stringify(newCart));
     }
     catch(error){
      // error-handling goes here
     }
   }

对象未存储到本地存储中。 - 反应 JS

1 个答案: