未定义错误：TypeError：无法读取未定义的属性（读取“图标”）答案

【问题标题】：Undefined Error: TypeError: Cannot read properties of undefined (reading 'Icon')未定义错误：TypeError：无法读取未定义的属性（读取“图标”）
【发布时间】：2022-02-01 22:28:35
【问题描述】：

我通过观看一些视频和浏览在线教程，一直在玩 NextJS 和 TypeScript。直到最近我还没有遇到问题，但我一直坚持这一点。我已经检查了我的type.ts、resumeData.ts 和我的Bar.tsx，并且我的 vsCode 没有给我任何问题错误（当然我知道它并不能解决所有问题）。

我对名称和级别没有任何问题，但由于某种原因，我似乎遗漏了为什么我在 Bar.tsx 内的 const Bar:... 中收到未定义的错误（除了它很明显说它未定义）和甚至不确定应该在哪里定义或如何定义。

我已将上述每个文件发布在下面。

感谢您对此的任何帮助或建议。

Bar.tsx

import { FunctionComponent } from "react";
import { ISkill } from "../type";
import { motion } from "framer-motion";

const Bar: FunctionComponent<{ value: ISkill }> = ({
  value: { Icon, name, level },
}) => {
  const bar_width = `${level}%`;

  const variants = {
    initial: {
      width: 0,
    },
    animate: {
      width: bar_width,
      transition: {
        duration: 0.4,
        type: "spring",
        damping: 10,
        stiffness: 100,
      },
    },
  };

  return (
    <div className="my-2 text-white bg-gray-300 rounded-full dark:bg-dark-300 dark:bg-black-500">
      <motion.div
        className="flex items-center px-4 py-1 rounded-full bg-gradient-to-r from-green to-blue-600"
        style={{ width: bar_width }}
        variants={variants}
        initial="initial"
        animate="animate"
      >
        <Icon className="mr-3" />
        {name}
      </motion.div>
    </div>
  );
};

export default Bar;

type.ts

import { IconType } from "react-icons/lib";

export interface IService {
  Icon: IconType;
  title: string;
  about: string;
}

export interface ISkill {
  Icon: IconType;
  name: string;
  level: string;
}

export interface IProject {
  name: string;
  description: string;
  image_path: string;
  deployed_url: string;
  github_url: string;
  category: Category[];
  key_techs: string[];
}

export type Category = "react" | "mongo" | "express" | "django" | "node";

resumeData.ts

import { ISkill } from "../type";
import { BsCircleFill } from "react-icons/bs";

export const languages: ISkill[] = [
  {
    Icon: BsCircleFill,
    name: "Python",
    level: "70%",
  },
  {
    Icon: BsCircleFill,
    name: "JavaScript",
    level: "60%",
  },
  {
    Icon: BsCircleFill,
    name: "React Native",
    level: "80%",
  },
  {
    Icon: BsCircleFill,
    name: "React",
    level: "70%",
  },
  {
    Icon: BsCircleFill,
    name: "Django",
    level: "80%",
  },
  {
    Icon: BsCircleFill,
    name: "Bootstrap",
    level: "80%",
  },
];

export const tools: ISkill[] = [
  {
    Icon: BsCircleFill,
    name: "Figma",
    level: "85%",
  },
  {
    Icon: BsCircleFill,
    name: "Photoshop",
    level: "45%",
  },
  {
    Icon: BsCircleFill,
    name: "Illustrator",
    level: "60%",
  },
  {
    Icon: BsCircleFill,
    name: "Framer",
    level: "70%",
  },
];

【问题讨论】：

你能给我们看一下父级 JSX 的 <Bar ... /> 部分吗？

标签： javascript reactjs typescript next.js tailwind-css

【解决方案1】：

const Bar: FunctionComponent<{ value: ISkill }> = ({
  value: { Icon, name, level },
}) => {
// Your code ...
}

这里的错误来自第 2 行：value: {Icon, name, level}。来自 props 的 value 似乎是未定义的。检查Bar 组件的使用位置以及props 是否正确传递。

例子：

<Bar value={{Icon: YourIcon, name: "...", level: "..."}}/>

【讨论】：

谢谢 nightElf 看起来最简单的返回一点的解决方案有帮助。似乎路径没有得到正确重构，这导致了问题。现在我只是觉得不看那额外的后退一步很傻。

【解决方案2】：

如果Icon 有可能是未定义的，您总是可以在尝试将其包含在您的 JSX 中之前测试它的值。这至少应该消除错误。

{Icon && (<Icon className="mr-3" />)}

首先要确定Icon 未定义的原因，您必须查看包含<Bar> 的父组件，以查看Icon 属性在value 对象中未正确设置的位置。

【讨论】：