无法获取或放置一个值，该值与多对一 JPA DB 关系有关

问：

我需要从 Java JPA 数据库中获取并放置一个值，但不能。此值 （countryId） 是一个整数，它取决于多对一关系（产品/国家/地区）。我可以毫无问题地从“产品”表中获取并放置其余值。

控制器

形式

从 Postman 更改 id 值有效。

邮差

我只需要知道如何从反应端获得推杆。

import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { Link, useNavigate, useParams } from 'react-router-dom'

export default function EditProduct() {

    let navigate=useNavigate();
    const {id}=useParams();
    
    const [product,setProduct]= useState({
        productName:"",
        productDescription:"",
        productPrice:"",
        transAvailable:"",
        countryId:0
    });

    const{productName,productDescription,productPrice,transAvailable,countryId}=product;

    const onInputChange=(e)=>{
        setProduct({...product,[e.target.name]: e.target.value});
    };

    useEffect(() => {
        loadProduct();
    },[]);

    const onSubmit= async(e)=>{
        e.preventDefault();
        await axios.put(`http://localhost:8080/product/${id}/`, product);
         navigate(`/viewproduct/${id}`);
    };

    const loadProduct =async ()=>{
        const result=await axios.get(`http://localhost:8080/product/${id}/`);
        setProduct(result.data);
    };

  return (
    <div className="container">
        <div className ="row">
            <div className="col-md-6 offset-md-3 border rounded p-4 mt-2 shadow">
                <h2 className="text-center">Edit Product</h2>
                <form onSubmit={(e) => onSubmit(e)}>
                <div className="mb-3 mt-4">
                    <label htmlFor="ProductName" className="form-label">
                        Product to edit
                    </label>
                    <input
                        type={"text"}
                        className="form-control"
                        placeholder="Enter product"
                        name="productName"
                        value={productName}
                        onChange={(e)=>onInputChange(e)}
                    />
                </div>

                <div className="mb-3">
                    <label htmlFor="ProductDescription" className="form-label">
                        UPC/ID #
                    </label>
                    <input
                        type={"text"}
                        className="form-control"
                        placeholder="Enter UPC/ID #"
                        name="productDescription"
                        value={productDescription}
                        onChange={(e)=>onInputChange(e)}
                    />
                </div>

                <div className="mb-3">
                    <label htmlFor="Price" className="form-label">
                        Price
                    </label>
                    <input
                        type={"text"}
                        className="form-control"
                        placeholder="Enter price"
                        name="productPrice"
                        value={productPrice}
                        onChange={(e)=>onInputChange(e)}
                    />
                </div>

                <div className="mb-3">
                    <label htmlFor="TransactionAvailable" className="form-label">
                     Available Transaction
                    </label>
                    <input
                        type={"text"}
                        className="form-control"
                        placeholder="Enter price"
                        name="transAvailable"
                        value={transAvailable}
                        onChange={(e)=>onInputChange(e)}
                    />
                </div>

                <div className="mb-3">
                    <label htmlFor="CountryId" className="form-label">
                        Country ID
                    </label>
                    <input
                        type={"number"}
                        className="form-control"
                        placeholder="Enter country ID"
                        name="countryId"
                        value={countryId}
                        onChange={(e)=>onInputChange(e)}
                    />
                </div>

                <button type="submit" className="btn btn-outline-primary" >
                    Submit
                </button>
                <Link className="btn btn-outline-danger mx-2" to="/">
                    Cancel
                </Link>
                </form>
            </div>
        </div>
    </div>    
  );
}