使用 let in react 时未定义数据答案

【问题标题】：data is not defined when using let in react使用 let in react 时未定义数据
【发布时间】：2022-09-29 23:45:32
【问题描述】：

我正在尝试在我的 jsx 中动态使用数据，所以当我使用 let 声明一个名为“data”的变量并在不同情况下更改其值时，它表示在检查期间未定义数据：TypeError：数据未定义。

我认为 let 基本上可以让我们做到这一点......很困惑，请帮忙？哪个部分不起作用？

这是我的代码：

export default function Dashboard() {
  return (
    <div>
      <div className=\"flex p-5 gap-10\">
        <Widgets type=\"user\" />
        <Widgets type=\"order\" />
        <Widgets type=\"earnings\" />
        <Widgets type=\"balance\" />
      </div>
    </div>
  );
}


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 }) => {
  let data;

  const amount = 100;
  const diff = 20;

  switch (type) {
    case \"user\":
      data = {
        title: \"Userss\",
        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;
    case \"user\":
      data = {
        title: \"Balance\",
        isMoney: true,
        link: \"See details\",
        icon: <UsersIcon />,
      };
    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}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;

考虑使用useState 钩子。

标签： reactjs react-props let

【解决方案1】：

我假设您复制并粘贴到您的 switch 语句中，因为您有两次 user 案例并且没有 balance。因为您的默认值没有将data 设置为任何值，所以当类型为'balance' 时它是未定义的

【讨论】：

【解决方案2】：

data 的初始化是未定义的。只需尝试使用可选链接来显示data:data?.titledata?.isMoneydata?.link 等。希望它会有所帮助:)

【讨论】：