export interface datatype{
date: string[];
item1: number[];
item2: number[];
item3: number[];
...itemn: number[];
}
type Props = {
id:string;
}

export const fetchdata= (props: Props) => {
const { id} = props;
const { isLoading, data } = useQuery(['fetch'], () => {
return api.get(`/${id}`);
    });

if (isLoading) {
return <h2>Loading...</h2>;
    }

const {
date,
item1,

item2,

....itemn,
    } = data?.data[0] as datatype;

return (
<>

<h2>data</h2> <table> <thead> <tr> <th></th> 
{data.data\[0\].date.map(date => ( <th key={date}>{date}</th>))} </tr>

这种情况发生在每一个项目。我有两个红线下的数据和日期，第一个说
常量数据：AxiosResponse〈任意，任意〉|未定义的
“data”可能是“未定义的”。ts（18048）（data），第二个是
（参数）日期：任何
参数“date”隐式具有“any”类型。ts（7006）
我从API中得到的数据是一个来自post gres数据库的请求，它选择了多个项目，例如从mydatabase中选择item1，item2，item3 .. itemn，其中id = unique id。所以它返回我假设一个对象？，并且每个项目1，2，3，4日期等都是一个数组。代码运行并返回表，但是，我希望去掉这些红线。
我还想知道，在不调用每一个项目的情况下，假设您希望使其可定制，以便用户可以选择他们想要的某些项目，如何实现这一点，使代码动态化？