React中用let声明data变量却触发TypeError: data未定义求助

你遇到的TypeError: data is undefined问题，根源在这两处：

1. Switch分支写错且缺失目标case #

你的Dashboard组件里传了type="balance"，但Widgets的switch语句里，把本该对应balance的分支写成了重复的case "user"，导致type="balance"时没有匹配到任何赋值逻辑，data保持初始的undefined状态。

2. 未处理默认情况的data赋值 #

即使传入了未定义的type，你的default分支仅执行break，没有给data设置兜底值，后续JSX中访问data.title、data.icon等属性自然会报错。

修复后的完整代码 #

import React from "react";
import { ArrowDownIcon, ArrowUpIcon } from "@heroicons/react/20/solid";
import {
  CursorArrowRaysIcon,
  EnvelopeOpenIcon,
  UsersIcon,
} from "@heroicons/react/24/outline";

function classNames(...classes) {
  return classes.filter(Boolean).join(" ");
}

const Widgets = ({ type }) => {
  // 先给data设置默认值，避免未匹配分支时出现undefined
  let data = {
    title: "Unknown",
    isMoney: false,
    link: "View details",
    icon: <CursorArrowRaysIcon />
  };

  const amount = 100;
  const diff = 20;

  switch (type) {
    case "user":
      data = {
        title: "Users",
        isMoney: false,
        link: "See all users",
        icon: <UsersIcon />,
      };
      break;
    case "order":
      data = {
        title: "Orders",
        isMoney: false,
        link: "View all orders",
        icon: <UsersIcon />,
      };
      break;
    case "earnings":
      data = {
        title: "Earnings",
        isMoney: true,
        link: "View all earnings",
        icon: <UsersIcon />,
      };
      break;
    // 修正为正确的balance分支
    case "balance":
      data = {
        title: "Balance",
        isMoney: true,
        link: "See details",
        icon: <UsersIcon />,
      };
      break;
    default:
      break;
  }

  return (
    <div>
      <div className="flex flex-1 justify-between border-solid border-2">
        <div className="flex flex-col justify-between">
          <span className="title">{data.title}</span>
          <span className="couter">
            {data.isMoney && "$"} {amount}
          </span>
          <span className="link">{data.link}</span>
        </div>

        <div className="right">
          <div className="percentage postive">
            <ArrowUpIcon />
            {diff}%
          </div>
          <div>{data.icon}</div>
        </div>
      </div>
    </div>
  );
};

export default Widgets;

额外优化建议 #

用对象映射替代switch，代码会更简洁易维护：

const Widgets = ({ type }) => {
  const amount = 100;
  const diff = 20;

  // 定义所有type对应的配置映射
  const dataMap = {
    user: {
      title: "Users",
      isMoney: false,
      link: "See all users",
      icon: <UsersIcon />,
    },
    order: {
      title: "Orders",
      isMoney: false,
      link: "View all orders",
      icon: <UsersIcon />,
    },
    earnings: {
      title: "Earnings",
      isMoney: true,
      link: "View all earnings",
      icon: <UsersIcon />,
    },
    balance: {
      title: "Balance",
      isMoney: true,
      link: "See details",
      icon: <UsersIcon />,
    },
  };

  // 匹配数据，无匹配则用默认值
  const data = dataMap[type] || {
    title: "Unknown",
    isMoney: false,
    link: "View details",
    icon: <CursorArrowRaysIcon />
  };

  // 后续JSX代码不变
};

内容的提问来源于stack exchange，提问作者jimzhou