未定義錯誤：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: "..."}}/>