我想通过单击属性列表获取每个ID的详细信息属性，我已获取property值，但无法检索category值 使用外键。
这是我的test.jsx组件：

import React, { useState, useEffect } from 'react';
import { axiosInstance } from '../config/config.js';

function PropertyList() {
  const [properties, setProperties] = useState([]);

  const fetchPro = async () => {
    await axiosInstance.get('/propertys').then((res) => {
      // console.log(res.data.result);
      const datas = res.data.result;

      setProperties(datas);
      console.log(datas);
    });
  };

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

  return (
    <div>
      <h1>Property List</h1>
      <ul>
        {properties.map((property) => (
          <div className="bg-danger">
            <li key={property.id}>
              <a href={`/propertydetaillist/${property.id}`}>{property.name}</a>
            </li>
          </div>
        ))}
      </ul>
    </div>
  );
}

export default PropertyList;

这是我的testdetail.jsx组件：

import React, { useState, useEffect } from 'react';
import { axiosInstance } from '../config/config.js';
import { useParams, withRouter } from 'react-router-dom';

function PropertyDetails(props) {
  const [property, setProperty] = useState({});

  const { id } = useParams();
  const fetchProDetail = async () => {
    await axiosInstance.get(`/propertys/detail/${id}`).then((res) => {
      // console.log(res.data.result);
      const datas = res.data.result;

      setProperty(datas);
      console.log(datas);
    });
  };

  useEffect(() => {
    fetchProDetail();
    console.log(property);
  }, [id]);

  return (
    <div>
      {property ? (
        <div>
          <h1>{property.category.id}</h1>
          <h1>{property.name}</h1>
          <p>{property.description}</p>
          <p>Price: {property.propertyImage}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default PropertyDetails;

这是我单击属性列表

之一时出现的问题
我想通过在属性表中使用外键来获取类别值。