ReactJS 映射嵌套的 JSON 并获取其值答案

【问题标题】：ReactJS map nested JSON and get its valuesReactJS 映射嵌套的 JSON 并获取其值
【发布时间】：2021-08-05 11:50:06
【问题描述】：

我正在尝试映射嵌套的 JSON，但我得到“元素隐含地具有“任何”类型”。

错误发生在搜索组件中：

Object.keys(skills[keyName]).map()

这是我的组件：

import skills from "./skills.json";

const Search = () => {
  return (
    <div className="iterate-object">
      {Object.keys(skills).map(function (keyName: string, keyIndex: number) {
        return (
          <ul key={keyIndex}>
            {keyName}
            {Object.keys(skills[keyName]).map(function (
              keyName: string,
              keyIndex: number
            ) {
              return <li>{keyName}</li>;
            })}
          </ul>
        );
      })}
    </div>
  );
};

export default Search;

这是我的一段 JSON：

{
  "engineering": {
    "civil-engineering": {
      "label": "Civil Engineering (Architecture)",
      "icon": "CpuIcon"
    },
    "bioengineering": {
      "label": "Bioengineering",
      "icon": "CpuIcon"
    }
  },
  "science": {
    "astronomy": {
      "label": "Astronomy",
      "icon": "RocketIcon"
    },
    "biology": {
      "label": "Biology",
      "icon": "CpuIcon"
    }
  }
}

这里是带有重现错误https://codesandbox.io/s/error-9xswz?file=/src/App.tsx的codeandbox链接

编辑：我还有一个问题。我需要做什么才能访问“图标”和“标签”？

【问题讨论】：

标签： json reactjs typescript

【解决方案1】：

出现错误是因为您的keyName 的类型是string，而要能够使用密钥访问skills 对象属性，它必须是"engineering" | "science" | "creative" | "marketing" | "business" 类型（因为这些是skills 对象的唯一可能的键/属性名称）。

要使其工作，您可以将keyName 从string 转换为keyof typeof skills 类型，换句话说，从string 转换为skills 对象的所有可能的属性名称。像这样：

...
const key = keyName as keyof typeof skills;

return (
  <ul key={keyIndex}>
    {keyName}
    {Object.keys(skills[key]).map(function (keyName: string, keyIndex: number) {
      return <li>{keyName}</li>;
    })}
  </ul>
);
...

Link to Codesandbox

【讨论】：