Question

这是特定于React的。

我有一个这样的对象：

interface Profile {
    name: string;
    title: string;
}

const NewPerson: Profile = {
    name: "John Smith",
    title: "Software Engineer"
}

我想像这样在React组件中返回该对象的键-值对：

function MyFunc() {
  return (
   <div>
    {
      Object.keys(NewPerson).map((key) => (
        <div>{key}: {NewPerson[key]}</div>
      ))
     }
    </div>
  )
}

但是，我可以访问它们key，但不能访问其值。我有这个错误：

TS：元素隐式地具有“ any”类型，因为类型“ string”的表达式不能用于索引类型“ Profile”。在“配置文件”类型上找不到带有“字符串”类型参数的索引签名。

我尝试使用Object.values和filter，但无法修复。

Answer 1

尝试

interface Profile {
    name: string;
    title: string;
    [key: string]: string;
}
const NewPerson: Profile = {
    name: "John Smith",
    title: "Software Engineer"
}
function MyFunc() {
  return (
   <div>
    {
      Object.keys(NewPerson).map((key: keyof Profile) => (
        <div>{key}: {NewPerson[key]}</div>
      ))
     }
    </div>
  )
}

Answer 2

将Object.entries与forEach循环结合使用该怎么办？

Object.entries(NewPerson).forEach(([key, value]) => {
   <div>{key}: {value}</div>
})

React TypeScript如何遍历一个对象？

2 个答案: