TypeError：无法读取未定义的属性（读取“toLocaleString”）答案

【问题标题】：TypeError: Cannot read properties of undefined (reading 'toLocaleString')TypeError：无法读取未定义的属性（读取“toLocaleString”）
【发布时间】：2021-11-27 19:22:53
【问题描述】：

我正在上 React JS 课程。我想使用 props 和 toLocaleString 方法来呈现日期和日期。但是应用程序只是崩溃了。这是我的代码

 function ExpenseDate(props) {
  const month = props.date.toLocaleString("en-US", { month: "long" });
  const day = props.date.toLocaleString("en-US", { day: "2-digit" });
  const year = props.date.getFullYear();

  return (
    <div>
      <div>{month}</div>
      <div>{year}</div>
      <div>{day}</div>
    </div>
  );
}

export default ExpenseDate;

当我导出并使用该组件并刷新服务器时。服务器显示： Undefined (reading 'toLocaleString')

请帮忙。我很着急！

【问题讨论】：

您是否检查过“日期”是否已定义？

标签： reactjs jsx

【解决方案1】：

您需要验证字段是否有值。如果您使用的是 babel，这将起作用：

 function ExpenseDate(props) {
  const month = props.date?.toLocaleString("en-US", { month: "long" });
  const day = props.date?.toLocaleString("en-US", { day: "2-digit" });
  const year = props.date?.getFullYear();

  return (
    <div>
      <div>{month}</div>
      <div>{year}</div>
      <div>{day}</div>
    </div>
  );
}

【讨论】：

兄弟。这行得通。但是“？”是什么？日期之后？
Babel 是一个 javascript 编译器。当你使用它时，这个“？”转换为像 { props 的 javascript 验证？道具：“道具无效”}。当审讯在那里时，它以一种干净的方式进行验证。你应该阅读更多关于 babel babeljs.io/docs/en/index.html

【解决方案2】：

好吧，我以为我疯了，我实际上是在完全相同的步骤上做同样的反应课程，我想弄清楚我做错了什么？我添加了？但现在日期不显示了。

好的，如果你继续前进，他会纠正问题，在 ExpenseItem.js 文件的返回中，你需要添加以下内容：

<ExpenseDate date={props.date} />

【讨论】：

是的，我后来在课程中发现了。但是关于 Props 部分的解释有点混乱。你不这么认为吗？

【解决方案3】：

我也遇到了同样的错误：TypeError: Cannot read properties of undefined (reading 'toLocaleString')

在我的代码中

      <div className="coin-data">
            <p className="coin-price">Rs.{price}</p>
             <p className="coin-volume">Rs.{volume.toLocaleString()}</p>
            {pricechange<0 ? (
                <p className="coin-percent red">{pricechange.toFixed(2)}%</p>
            ):(
                <p className="coin-percent green">{pricechange.toFixed(2)}%</p>
            )
        }
        <p className="coin-marketcap">
            Mkt Cap: Rs.{marketcap.toLocaleString()}
        </p>
        </div>

在我的例子中，使用? 来检查是否有值的字段

      <div className="coin-data">
            <p className="coin-price">Rs.{price}</p>
             <p className="coin-volume">Rs.{volume?.toLocaleString()}</p>
            {pricechange<0 ? (
                <p className="coin-percent red">{pricechange.toFixed(2)}%</p>
            ):(
                <p className="coin-percent green">{pricechange.toFixed(2)}%</p>
            )
        }
        <p className="coin-marketcap">
            Mkt Cap: Rs.{marketcap?.toLocaleString()}
        </p>
        </div>

【讨论】：