Я пытаюсь получить данные из бэкэнда Springboot с помощью axios в интерфейсе vite+react, но это приводит к ошибке только при получении идентификатора данных, но URL-адрес работает правильно на локальном хосте с идентификатором.
URL-адрес: -
http://localhost:8080/api/products/1
Но через интерфейс отображается ошибка: -
Не удалось загрузить ресурс: сервер ответил со статусом 400 ()
Ошибка получения продукта: AxiosError
И в Backend отображается ошибка: -
Не удалось преобразовать значение типа «java.lang.String» в требуемый тип «int»; Для входной строки: «NaN»
Фронтенд: — Product.jsx
import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
import axios from "../axios";
const Product = () => {
const { id } = useParams();
const [product, setProduct] = useState(null);
useEffect(() => {
const fetchProduct = async () => {
const productId = parseInt(id, 10);
try {
const response = await axios.get(`http://localhost:8080/api/products/${productId}`);
setProduct(response.data);
console.log(response.data);
} catch (error) {
console.error("Error fetching product:", error);
}
};
fetchProduct();
}, [id]);
if (!product) {
return (
Loading...
);
}
return (
{product.category}
{product.name}
{product.brand}
{product.description}
{"$" + product.price}
{product.productAvailable ? "Add to cart" : "Out of Stock"}
Stock Available :{" "}
{product.stockQuantity}
Product listed on:
{product.releaseDate}
Update
Delete
);
};
export default Product;
В Backend идентификатор инициализируется как: - Private int ProductID;
Маршрутизатор и объявление маршрута: -
import "./App.css";
import React, { useState, useEffect } from "react";
import Home from "./components/Home";
import Navbar from "./components/Navbar";
import Cart from "./components/Cart.jsx";
import AddProduct from "./components/AddProduct";
import Product from "./components/Product";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { AppProvider } from "./Context/context";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js";
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
const [cart, setCart] = useState([]);
const [selectedCategory, setSelectedCategory] = useState("");
const handleCategorySelect = (category) => {
setSelectedCategory(category);
console.log("Selected category:", category);
};
const addToCart = (product) => {
const existingProduct = cart.find((item) => item.id === product.id);
if (existingProduct) {
setCart(
cart.map((item) =>
item.id === product.id
? { ...item, quantity: item.quantity + 1 }
: item
)
);
} else {
setCart([...cart, { ...product, quantity: 1 }]);
}
};
return (
);
}
export default App;
Бэкенд:-
ProductController.java
package com.shristi.ecom_proj.controller;
import com.shristi.ecom_proj.Model.Product;
import com.shristi.ecom_proj.service.productService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@CrossOrigin
@RequestMapping("/api")
public class ProductController {
@Autowired
private productService service;
@RequestMapping("/")
public String greet(){
return "Hello World";
}
@GetMapping("/products")
public List
getAllProducts(){
return service.getAllProducts();
}
@GetMapping("/products/{id}")
public Product getProduct(@PathVariable int id){
return service.getProductById(id);
}
}
ProductService.java
@Autowired
private productRepo repo;
public Product getProductById(int id) {
return repo.findById(id).get();
Product.java
public class Product {
@Id
@GeneratedValue(strategy=GenerationType.IDENTITY)
private int productID;
private String Name;}
Подробнее здесь: https://stackoverflow.com/questions/791 ... xios-error
