从api数据集获取数据键

Question

我很难从api结果中解析数据。我需要从下面的getDailyRate函数返回一个数字。我的代码-

export type DailyRateType = {
'success': boolean;
'user' : string;
'quotes' : object;
}
export const getDailyRate = (day:string):number =>
{
let data = fetchDailyRates()
let quotes = data.quotes; //Gives error that 'quotes' doesnt exist in Promise<DailyRateType[]>
let quotes = data['quotes']; //Gives error similar to above
console.log(data); // prints out promise
}
const fetchDailyRates = async (): Promise<DailyRateType[]> => 
await (await fetch('http://myapilayer.net?format=1')).json();

然而，如果我通过创建下面这样的另一个函数来测试使用假数据，它会很好地工作。然而，我需要让它与API数据一起工作。

cons fetchDailyRates_v2 = (): DailyRateType[] => {
return [
{
success: true,
user: 'Admin',
quotes: {
'day1': 5.5,
'day2': 5.8,
'day3': 5.4,
}
}
];
}

更新

根据以下建议，我将asyc/await添加到getDailyRate:

export const getDailyRate = async (day:string) =>
{
let data = await fetchDailyRates();
let quotes = data['quotes']; 
//Gives error - Element implicitly has an 'any' type because index expression is not of type 'number'.
console.log(data); // prints out promise
return 1;
}

此更新的问题-

1. 添加async/await会产生另一个问题，并要求我从函数中删除"数字"类型，因为它变成了Promise

2. 返回类型变为Promise——我只需要它是数字。所以，如果我只返回数值(1或2(。返回类型变为Promise，我尝试将此值附加到另一个位置。。。得到这个错误"；类型"Promise"不可分配给类型"number">

Answer 1

您不能使用异步函数的from result，如同步功能，另一方面，当具有Promise时，您所需的类型必须由Promise返回(或者不指定类型，视为任何类型(。我将在下面用另一种方式显示自定义挂钩可能对你有用：

//import required packages
export type DailyRateType = {
success: boolean;
user: string;
quotes: object;
};
export const useLazyQuery = () => {
const [loading, setLoading] = React.useState<boolean>(false);
const [data, setData] = React.useState([] as DailyRateType[]);
const _request = async = () => {
try {
setLoading(true);
const reponsedJson = await (await fetch('http://myapilayer.net?format=1')).json();
console.log(data); //optional
setData(reponsedJson);
setLoading(false);
} catch (error) {
console.error(error);
setLoading(false);
}
}
return [_request, {loading, data}];
}

根据您的响应模式(fetchDailyRates_v2(，例如，为了访问第一个元素中的引号，您应该使用类似于的数据？。[0]？。引用其中的。

Answer 2

您应该对getDailyRate使用async/await，检查此项：

export type DailyRateType = {
success: boolean;
user: string;
quotes: object;
};
async function getDailyRate(day: string): number {
let data = await fetchDailyRates();
let quotes = data?.['quotes']; 
console.log(data, quotes);
return 1
}
const fetchDailyRates = async (): Promise<DailyRateType[]> =>
await (await fetch('http://myapilayer.net?format=1')).json();

在，您需要调用getDailyRate，如下所示：

await getDailyRate()更新我添加了一个带有jsonplaceholder数据的测试：

async function getDailyRate(day: string): Promise<number> {
let data = await fetchDailyRates();
let userId = data?.['userId'];
console.log(userId, ` <--- userId ----`);
return 1;
}
const fetchDailyRates = async (): Promise<DailyRateType[]> =>
await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json();

const test = async () => {
let temp: number = 1;
temp = await getDailyRate('1'); // this is not complaining about the type
};