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

Question

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

我对名称和级别没有任何问题，但由于某种原因，我似乎遗漏了为什么我在 const Bar 内的Bar.tsx中收到未定义的错误const 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;

类型.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";

恢复数据.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%",
  },
];

Answer 1

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

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

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

Answer 2

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

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

例子：

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