React+TypeScript中getAllPanels函数panels报红波浪线的原因及解决方法

问题原因 #

你在axios.get<PanelData[]>(kBaseURLPanels)里声明接口返回的是PanelData[]数组，但实际后端返回的是包含panels字段的对象，而非直接的数组。TypeScript根据你声明的类型认定res.data是数组，自然找不到panels属性，因此报错。

解决方案 #

1. 定义API返回数据的类型
   先明确后端返回的JSON结构（假设格式如下）：

   {
     "panels": [
       {"id": 1, "name": "面板1", "organ_id": 2},
       ...
     ]
   }
   

   对应定义TypeScript类型：

   // 后端返回的单个面板数据结构
   interface ApiPanel {
     id: number;
     name: string;
     organ_id: number;
   }
   
   // 后端返回的整体响应结构
   interface PanelApiResponse {
     panels: ApiPanel[];
   }
   

2. 修正axios请求的泛型类型
   将axios.get<PanelData[]>改为axios.get<PanelApiResponse>，让TypeScript识别res.data包含panels属性：

   const getAllPanels = () => {
     return axios
       .get<PanelApiResponse>(kBaseURLPanels)
       .then((res) => {
         console.log(res)
         return res.data.panels.map(convertPanelFromAPI)
       })
       .catch((err) => {
         console.log("Error fetching panels:", err);
         return [];
       });
   };
   

3. 确保PanelData类型匹配转换后的结构
   检查PanelList导出的PanelData接口，要和convertPanelFromAPI返回的结构一致：

   // 示例：PanelList组件中的定义
   export interface PanelData {
     id: number;
     name: string;
     organID: number; // 与转换后的字段名保持一致
   }
   

完整修正后的代码片段 #

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import PanelList, { PanelData } from './components/PanelList';

const kBaseURLPanels = 'http://127.0.0.1:8000/panels/';

// 新增API返回数据类型定义
interface ApiPanel {
  id: number;
  name: string;
  organ_id: number;
}

interface PanelApiResponse {
  panels: ApiPanel[];
}

const getAllPanels = () => {
  return axios
    .get<PanelApiResponse>(kBaseURLPanels) // 修改泛型类型
    .then((res) => {
      console.log(res)
      return res.data.panels.map(convertPanelFromAPI)
    })
    .catch((err) => {
      console.log("Error fetching panels:", err);
      return [];
    });
};

const convertPanelFromAPI = (apiPanel: ApiPanel) => { // 使用定义好的ApiPanel类型
  const { id, name, organ_id } = apiPanel;
  const newPanel = { id, name, organID: organ_id };
  return newPanel;
};

const App: React.FC = () => {
  const [panelData, setPanelData] = useState<PanelData[]>([]);

  useEffect(() => {
    getAllPanels().then((panels) => {
      console.log("Fetched panels:", panels);
      setPanelData(panels);
    });
  }, []);

  console.log("panelData in App:", panelData);

  return (
    <div>
      <PanelList panelData={panelData} />
    </div>
  );
}

export default App;

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