React 显示 json 键和值

Posted 2023-02-22

【中文标题】React 显示 json 键和值

【英文标题】：React display json key and value

【发布时间】：2021-03-03 17:27:04

【问题描述】：

我正在尝试读取 JSON 数据： 我得到了这个错误 元素隐式具有“任何”类型，因为“字符串”类型的表达式不能用于索引类型 我的数据是本地 josn 文件，我正在导入它们：

    "user": 
      "name": "foo",
      "location": "India",
       
    ,
    "product": 
        "name": "Iphone",
        "version": "12",
      

我是这样显示的

const data =data;

            <div>
              Object.keys(data.user).map((key,i) => (
                <p key=i>
                    <span>key</span>
                    <span>data.user[key]</span>
                </p>))
           </div>

除了这条线，一切都正常：

<span>data.user[key]</span>

它给出了错误：

Element implicitly has an 'any' type because expression of type 'string' can't be used to the index type
No index signature with a parameter of type 'string' was found on type

【问题讨论】：

似乎没有错误。我已经在 Codesanbox 中试过了。

【参考方案1】：

您可以像这样将键转换为对象中的键：

(Object.keys(data.user) as (keyof typeof data.user)[]).map((key, i) => (
  <p key=i>
    <span>key</span>
    <span>data.user[key]</span>
  </p>
))

【参考方案2】：

只需将key 转换为任何类型：

<span>data.user[key as any]</span>

【参考方案3】：

为如下数据定义type

const data: [key: string]: [key: string]: string

工作代码 - https://codesandbox.io/s/distracted-hopper-2vowh?file=/src/App.tsx:205-212