reactjs - TypeError : data. map 不是函数，但 data 是数组

Question

我收到此错误

类型错误:data.map 不是函数

来自以下代码

import React, { useEffect, useState } from "react";
import axios from "axios";

// Import shadcn-ui components
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";

// Define the expected data structure for a service

interface firmServices {
\_id: string;
service_category: string;
service_name: string;
criticality: string;
service_type: string;
}

const ServicesList = () =\> {
// State to hold the retrieved services as an array
const initialState: firmServices\[\] = \[\];
const \[data, setData\] = useState(initialState);

useEffect(() =\> {
const fetchData = async () =\> {
try {
const response = await axios.get("http://localhost:3500/services");
const servicesData: firmServices\[\] = response.data;

        setData(servicesData);
        console.log(servicesData);
      } catch (error) {
        console.error("Error getting data", error);
        // You might want to set an error state or display an error message to the user
      }
    };
    
    fetchData();

}, \[\]);

return (
\<Table\>
\<TableCaption\>Firm Services\</TableCaption\>
\<TableHeader\>
\<TableRow\>
\<TableHead className="text-left"\>Name\</TableHead\>
\<TableHead className="text-left"\>Criticality\</TableHead\>
\<TableHead className="text-left"\>Type\</TableHead\>
\<TableHead className="text-left"\>Group\</TableHead\>
\</TableRow\>
\</TableHeader\>
\<TableBody\>
{data.map((servicesData) =\> (
\<TableRow key={servicesData.\_id}\>
\<TableCell\>{servicesData.service_category}\</TableCell\>
\<TableCell\>{servicesData.service_name}\</TableCell\>
\<TableCell\>{servicesData.criticality}\</TableCell\>
\<TableCell\>{servicesData.service_type}\</TableCell\>
\</TableRow\>
))}
\</TableBody\>
\</Table\>
);
};

export default ServicesList;

然而，数据是一个数组，如下来自console.log:

{firmServices: Array(6)}firmServices:Array(6)0:{_id: '6545d10db1f1c084db6134ea', service_category: 'Deposites', service_name: 'saving', criticality: 'high', service_type: 'client, internal'}1:{_id: '6545d10db1f1c084db6134eb', service_category: 'Deposites', service_name: 'checking', criticality: 'high', service_type: 'client, internal'}2:{_id: '6545d10db1f1c084db6134ec', service_category: 'Deposites', service_name: 'saving', criticality: 'high', service_type: 'client, internal'}3:{_id: '6545d10db1f1c084db6134ed', service_category: 'Deposites', service_name: 'saving', criticality: 'high', service_type: 'client, internal'}4:{_id: '6545d10db1f1c084db6134ee', service_category: 'Deposites', service_name: 'saving', criticality: 'high', service_type: 'client, internal'}5:{_id: '6545d10db1f1c084db6134ef', service_category: 'Deposites', service_name: 'saving', criticality: 'high', service_type: 'client, internal'}length:6

I have read all the issues posted that I can find most of which point to map.data needing an array, yet the data I have is an array.

任何人都可以为我阐明这一点。

提前致谢

我期望使用 shadcn-ui 中的 Table 来渲染表格

Answer 1

在您的代码中，您没有正确进行状态初始化。

const [data, setData] = useState<firmServices[]>(initialState);

当使接口(interface)使用命名约定时，例如在 I 前面

interface IfirmServices {
  _id: string; 
  service_category: string;
  service_name: string;
  criticality: string;
  service_type: string; 
}

 

const initialState: IfirmServices[] = [];
const [data, setData] = useState<IfirmServices[]>(initialState);

供您引用:

how to set react typescript useState fetch type and using map method

What is the naming convention for interfaces and classes in TypeScript?