javascript - Object.keys 迭代导致 Typescript 错误“元素隐式具有‘任何’类型,因为索引表达式不是‘数字’类型”
问题描述
我正在尝试显示返回对象的 API 调用的结果。为了做一个.map,我使用Object.keys
它来显示结果。
我正在学习 Typescript 的新知识并尝试在个人项目中进行练习,但我被这个问题难住了。
我正在进行 API 调用并取回一个对象。为了打印这些值,我使用 Object.keys 来映射这些值。
rates: Object
EUR: 0.8157272208
AUD: 1.3138918346
BRL: 5.1119993474
GBP: 0.7409087201
base: "USD"
date: "2020-12-18"
这是我的代码沙箱(如果我切换到 .ts 文件,整个事情就会爆炸) https://codesandbox.io/s/challenge-7-fetch-a-list-final-forked-7wtwu?file=/src/ index.js
TypeScript error in /Users/username/gitrepos/crypto-convert/src/App.tsx(60,39):
Element implicitly has an 'any' type because index expression is not of type 'number'. TS7015
58 | Object.keys(cryptos).map((crypto, index) => (
59 | <li key={index}>
> 60 | {crypto} : {cryptos[crypto]}
| ^
61 | </li>
网上有一些时髦的解决方案和绕过错误的方法,但我不想做任何骇人听闻的事情,因为重点是了解更多关于 TS 的信息。谁能帮我弄清楚我在这里做错了什么?谢谢!
解决方案
Object.keys
输入错误并返回string[]
而不是参数的键。因此,crypto
不能保证是 的键cryptos
。避免这种情况的一种方法是强制转换Object.keys
:
(Object.keys(cryptos) as keyof typeof cryptos).map(...)
或者,仅用于Object.entries
迭代键和值:
Object.entries(cryptos).map(([key, value], index) => (
<li key={index}>
{key}: {value}
</li>
)
推荐阅读
- java - JsonLayout 最大消息长度?
- c++ - 包含标题的宏
- c++ - Wt++ TableView 和 QueryModel
- javascript - 单击时清除文本
- javascript - 使用 Javascript 更改 CSS 规则
- nativescript - TypeError:无法读取未定义的属性“fromNativeSource”
- javascript - 如何使用 Ionic SQLite 转储/导出特定表?
- c - mvinnstr 返回一个带有 ncurses 的空字符串,而不是该行
- python - 取数据框中每一行的 predict_proba 的最大值
- python - Python SyntaxError:无法分配给运算符