React 显示 json 键和值答案

【问题标题】：React display json key and valueReact 显示 json 键和值
【发布时间】：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 中试过了。

标签： json reactjs typescript

【解决方案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

【讨论】：