【发布时间】：2021-12-20 11:10:49
【问题描述】：
我正在使用 django 并做出反应以构建一个简单的结帐系统。当我点击添加到购物车按钮时，我得到404 page not found 但点击事件应该将项目添加到购物车而不是呈现页面。我不确定我的 onclick 事件函数在下面的程序中是否准确。我很难通过使用onClick 事件单击购物车按钮来弄清楚为什么我无法将商品添加到购物车。控制台上的 url 指向包含我要添加的元素的 id 的实际 url。我可以在终端上的浏览器控制台和 Django 服务器中看到错误。我不知道是 react 应用还是 Django 的错误。
urls.py (Django)
path('add-to-cart/', add_to_cart_view.as_view(), name='add-to-cart'),
The react component
const AddToCartURL = "http://127.0.0.1:8000";
const ProductDetails = (props) => {
const [product, setProduct] = useState({});
useEffect(() => {
const id = props.match.params.id;
const fetchData = async () => {
try {
const res = await axios.get(`${ProductDetailURL}/product/${id}`);
setProduct(res.data);
console.log(res.data)
}
catch (err) {
}
};
fetchData();
}, [props.match.params.id]);
const handleAddToCartURL = (id) =>{
const fetchData = async () => {
try {
const res = await axios.post(`${AddToCartURL}/add-to-cart/${id}`);
setProduct(res.data);
console.log(res.data)
}
catch (err) {
}
};
fetchData();
}
return(
<Box sx={{ flexGrow: 1 }} m={4}>
<Grid container spacing={3}>
<Grid item xs={9}>
<Item>
<img src={product.image} alt="" />
<div>
<p>{product.description}</p>
<p>{product.label}</p>
<p>{product.price}</p>
</div>
<button color='primary' onClick={() => handleAddToCartURL(product.id)}>
<AddShoppingCartIcon />
</button>
</Item>
</Grid>
<Grid item xs>
<Item>Similar Products</Item>
</Grid>
</Grid>
</Box>
)
}
export default ProductDetails
添加到购物车的 Django 程序是：
class add_to_cart_view(APIView):
def post(self, request, *args, **kwargs):
id = request.data.get('id', None)
if id is None:
return Response({"message": "Invalid request. Ensure ypu have added added products to the cart"}, status=HTTP_400_BAD_REQUEST)
product = get_object_or_404(Product, id=id)
order_product_qs = product.objects.get_or_create(
product=product,
user=request.user,
ordered=False
)
if order_product_qs.exists():
order_product = order_product_qs.first()
order_product.quantity += 1
order_product.save()
else:
order_product = product.objects.create(
product=product,
user=request.user,
ordered=False
)
order_qs = Order.objects.filter(user=request.user, ordered=False)
if order_qs.exists():
order = order_qs[0]
if not order.products.filter(product__id=order_product_qs.id).exists():
order.products.add(order_product)
return Response(status=HTTP_200_OK)
else:
ordered_date = timezone.now()
order = Order.objects.create(user=request.user, ordered_date=ordered_date)
order.products.add(order_product)
return Response(status=HTTP_200_OK)
【问题讨论】：
-
首先，您不必在 handleAddToCartURL 函数中声明 fetchData 函数，使 handleAddToCartURL 函数异步并直接在其中运行 try/catch 块。至于 404，听起来您的前端和后端之间的 url 不匹配（您尚未发布 AddToCartUrl 到购物车变量的值或您的 django urls.py 文件）
-
非常感谢@coot3 对
handleAddToCart的更正。至于404 page not found，请再看一遍问题。我已经添加了AddToCartURL的值以及我从中获取数据的后端 url。
标签： javascript python reactjs django django-rest-framework