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

Posted 2023-02-21

【中文标题】TypeError：无法读取未定义的属性（读取“toLocaleString”）

【英文标题】：TypeError: Cannot read properties of undefined (reading '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')

请帮忙。我很着急！

【问题讨论】：

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

【参考方案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>