javascript - Eroare nedefinită: TypeError: Nu se pot citi proprietățile nedefinite (citind 'Icon')

Am tot experimentat cu NextJS și TypeScript vizionând câteva videoclipuri și parcurgând tutoriale online. Până recent nu m-am confruntat cu nicio problemă, dar acum sunt blocat aici. Am trecut prin fișierele mele type.ts, resumeData.ts și Bar.tsx și VSCode nu îmi arată nicio eroare (desigur, sunt conștient că nu detectează tot).

Nu am avut nicio problemă cu numele și cu nivelul, dar dintr-un anumit motiv par să nu înțeleg de ce primesc o eroare de tip undefined în Bar.tsx în interiorul const Bar:... (pe lângă aspectul evident că spune că nu este definit) și nici nu sunt sigur unde ar trebui să fie definit sau cum.

Am mers mai departe și am postat fiecare dintre fișierele menționate mai sus mai jos.

Mulțumesc pentru orice ajutor sau sugestii legate de acest lucru.

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%",
  },
];

Răspuns #1

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

Aici eroarea provine de la linia 2: value: {Icon, name, level}. Se pare că value care vine prin props este nedefinit. Verifică unde este folosit componentul Bar și dacă props sunt transmise corect.

Exemplu :

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

Răspunsul #2

Dacă există posibilitatea ca Icon să fie nedefinit, poți întotdeauna să verifici valoarea sa înainte de a încerca să îl incluzi în JSX-ul tău. Aceasta ar trebui cel puțin să elimine eroarea.

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

Pentru a determina de ce Icon este nedefinit în primul rând, trebuie să te uiți la componenta părinte care include <Bar> pentru a vedea unde proprietatea Icon nu este setată corect în obiectul value.