React TypeScript 如何遍历一个对象？

Posted 2023-02-22

【中文标题】React TypeScript 如何遍历一个对象？

【英文标题】：React TypeScript how to iterate through an object?

【发布时间】：2020-08-02 04:00:43

【问题描述】：

这是特定于 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：元素隐式具有“任何”类型，因为“字符串”类型的表达式不能用于索引“配置文件”类型。 在“配置文件”类型上找不到具有“字符串”类型参数的索引签名。

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

【问题讨论】：

这能回答你的问题吗？ Element implicitly has an 'any' type because expression of type 'string' can't be used to index

不，我不这么认为。我一直在阅读那里的答案，但在我的情况下分配 keyof typeof 不是一种选择。我只有 1 个接口和 1 个对象。

【参考方案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>
  )

【讨论】：

感谢您的建议，但我收到此错误：``` 类型参数 '(key: "title" | "name") => JSX.Element' is not assignable to parameter of类型'（值：字符串，索引：数字，数组：字符串 []）=> 元素'。参数“key”和“value”的类型不兼容。类型“字符串”不可分配给类型“标题”| “名称”'```

【参考方案2】：

将 Object.entries 与 forEach 循环结合使用怎么样，如下所示：

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

【讨论】：

感谢您的建议，但 forEach 在 React 中不起作用。

【参考方案3】：

我遇到了同样的问题并这样解决了：

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