属性"描述"在类型"TCompany[]"上不存在

Question

我刚接触打字，遇到了自己无法解决的问题。首先，我从API获取数据:

/*data.utils。ts*/

export const getCompany = async<T> (url: string): Promise<T> =>{
const response = await fetch(url);
return await response.json();
}

然后在Company页面组件中使用:

/*公司。tsx*/

import { getCompany } from '../../../utils/data.utils';
type TCompany = {
Name: string;
Description: string;
Address: string;
MarketCapitalization: string;
};
const Company = () => {
const [companyData, setCompanyData] = useState<TCompany[]>([]);
let { companySymbol } = useParams();
useEffect(() => {
const fetchCompany = async () => {
const url = `https://www.alphavantage.co/query?function=OVERVIEW&symbol=${companySymbol}&apikey=*******`;
const fetchedData = await getCompany<TCompany[]>(URL);
setCompanyData(fetchedData);
};
fetchCompany();
}, []);
return (
<>
<div>{companyData.Name}</div> //Property 'Name' does not exist on type 'TCompany[]'.ts(2339)
</>
);
};
export default Company;

但是<div>{companyData.Name}</div>给了我一个TS错误属性'Name'不存在类型'TCompany[] .ts(2339)

API输出:

{
"Symbol": "IBN",
"AssetType": "Common Stock",
"Name": "ICICI Bank Limited",
"Description": "ICICI Bank Limited offers various banking products and financial services in India and internationally. The company is headquartered in Mumbai, India.",
"CIK": "None",
"Exchange": "NYSE",
"Currency": "USD",
"Country": "USA",
"Sector": "TECHNOLOGY",
"Industry": "GENERAL",
"Address": "NONE",
"FiscalYearEnd": "March",
"LatestQuarter": "2021-12-31",
"MarketCapitalization": "68983734000",
"EBITDA": "None",
"PERatio": "23.73",
"PEGRatio": "0",
"BookValue": "504.33",
"DividendPerShare": "0",
"DividendYield": "0.0028",
"EPS": "0.824",
"RevenuePerShareTTM": "301.8",
"ProfitMargin": "0.22",
"OperatingMarginTTM": "0.249",
"ReturnOnAssetsTTM": "0.0149",
"ReturnOnEquityTTM": "0.139",
"RevenueTTM": "1014660530000",
"GrossProfitTTM": "966356348000",
"DilutedEPSTTM": "0.824",
"QuarterlyEarningsGrowthYOY": "0.175",
"QuarterlyRevenueGrowthYOY": "0.001",
"AnalystTargetPrice": "26.87",
"TrailingPE": "23.73",
"ForwardPE": "19.61",
"PriceToSalesRatioTTM": "0.068",
"PriceToBookRatio": "2.975",
"EVToRevenue": "-",
"EVToEBITDA": "-",
"Beta": "1.032",
"52WeekHigh": "22.34",
"52WeekLow": "14.95",
"50DayMovingAverage": "19.22",
"200DayMovingAverage": "19.5",
"SharesOutstanding": "3474310000",
"DividendDate": "2021-09-03",
"ExDividendDate": "2021-07-28"
}

我应该如何写TCompany来正确匹配类型??

不能给useState钩子指定any类型。

你知道这里出了什么问题吗?

Answer 1

companyData是一个数组，所以您应该使用索引来访问它。例子:

companyData[0].Name

或者你应该将companyData定义为对象而不是数组

const [companyData, setCompanyData] = useState<TCompany>({});

和

const fetchedData = await getCompany<TCompany>(URL);