无法通过外键从Property表获取Category值的React问题

从报错信息来看，核心问题是尝试访问undefined的属性id，也就是property.category为undefined时，你直接读取了property.category.id导致报错。同时需要确认后端接口返回的数据结构是否包含完整的category对象。

前端修复方案：空值保护 #

首先修改testdetail.jsx的初始状态和渲染逻辑，避免在数据未加载完成或category不存在时报错：

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

function PropertyDetails(props) {
  // 初始状态设为null，确保加载时显示Loading
  const [property, setProperty] = useState(null);

  const { id } = useParams();
  const fetchProDetail = async () => {
    try {
      const res = await axiosInstance.get(`/propertys/detail/${id}`);
      setProperty(res.data.result);
    } catch (err) {
      console.error('获取物业详情失败:', err);
    }
  };

  useEffect(() => {
    fetchProDetail();
  }, [id]);

  // 数据未加载完成时显示Loading
  if (!property) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      {/* 使用可选链操作符防止访问undefined属性，同时提供默认值 */}
      <h1>{property.category?.id || '暂无分类ID'}</h1>
      <h1>{property.name}</h1>
      <p>{property.description}</p>
      <p>Price: {property.propertyImage}</p>
    </div>
  );
}

export default PropertyDetails;

后端数据检查与处理 #

如果前端修复后仍然无法获取category的值，需要检查后端接口：

• 确认/propertys/detail/${id}接口返回的property数据中，是否包含嵌套的category对象，而不是仅返回categoryId之类的外键字段。
• 如果后端只返回了外键ID，有两种处理方式：
  1. 修改后端接口：在查询物业详情时，关联查询分类表，将category数据嵌套返回。
  2. 前端补充请求：拿到外键ID后，单独发起请求获取分类详情：

// 前端补充请求的示例代码
import React, { useState, useEffect } from 'react';
import { axiosInstance } from '../config/config.js';
import { useParams } from 'react-router-dom';

function PropertyDetails(props) {
  const [property, setProperty] = useState(null);
  const [category, setCategory] = useState(null);

  const { id } = useParams();

  const fetchData = async () => {
    try {
      const res = await axiosInstance.get(`/propertys/detail/${id}`);
      const propertyData = res.data.result;
      setProperty(propertyData);

      // 如果后端返回的是categoryId，单独请求分类数据
      if (propertyData.categoryId) {
        const categoryRes = await axiosInstance.get(`/categories/${propertyData.categoryId}`);
        setCategory(categoryRes.data.result);
      }
    } catch (err) {
      console.error('获取数据失败:', err);
    }
  };

  useEffect(() => {
    fetchData();
  }, [id]);

  if (!property) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h1>{category?.id || '暂无分类ID'}</h1>
      <h1>{property.name}</h1>
      <p>{property.description}</p>
      <p>Price: {property.propertyImage}</p>
    </div>
  );
}

export default PropertyDetails;

内容的提问来源于stack exchange，提问作者DapOne