无法从数据库中获取特定数据并显示在 react 前端

问：

我正在尝试将产品ID从productCard传递到产品详细信息页面。它定向到详细信息页面，但不显示从数据库获取的数据。我可以通过邮递员获取特定数据，后端服务器运行良好。请帮我修复此代码。

这是 ProductDetail 组件

import { Box, Button} from '@mui/material';
import React, { useEffect, useState } from 'react'
import Typography from '@mui/material/Typography';
import './ProductDetail.css';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import axios from 'axios';
import { useLocation } from 'react-router-dom';


const ProductDetails = () => {

  const location = useLocation();
  const id = location.pathname.split("/"[3])
  const [size, setSize] = React.useState('');
  const[products, setProducts] = useState('');

  const handleChange = (event) => {
    setSize(event.target.value);
  };

  useEffect(() => {
    const getProducts = async () => {
      try{
        const res = await axios.get('http://localhost:5000/getProduct/' + id);
        setProducts(res.data.data);
      } catch {}
    };
    getProducts();
  },[id]);

    

  return (
    <div className='detail-container'>


      <h1 className='detail-h1'>Product Details</h1>
      <h3 className='detail-h3'>{products.title}</h3>
      <h4 className='detail-h4'>{products.prize}</h4>
      <img src={products.img} alt='Product-img' className='detail-img'></img>
      
      <Box alignContent='end' paddingLeft='600px'>
        <Typography variant="h5" color="text.secondary">Description</Typography>
        <Typography variant="h5" color="text.primary">{products.descreption} </Typography>
        
        <Box sx={{ maxWidth: 120 }} paddingTop='20px'>
        <FormControl fullWidth>
        <InputLabel id="demo-simple-select-label">Size</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={size}
          label="Size"
          onChange={handleChange}
        >
          <MenuItem value={10}>S</MenuItem>
          <MenuItem value={20}>M</MenuItem>
          <MenuItem value={30}>L</MenuItem>
          <MenuItem value={40}>XL</MenuItem>
          <MenuItem value={50}>XXL</MenuItem>
          
        </Select>
      </FormControl>
      </Box>

      <Button  variant="contained" sx={{bgcolor:"#c85959", "&:hover":{bgcolor:"#4f0b0b"}, height:60,  width:300}} paddingtop='20px'>Add To Cart</Button>
      </Box>
         
    </div>
  )
}

export default ProductDetails;

请帮我修复此代码。控制台中未显示任何错误。