json - React 显示 json 键和值

Question

我正在尝试读取 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

标签： jsonreactjstypescript

Answer 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>
))}