Question

TypeError：无法读取未定义的属性（读取‘toLocaleString’）

2021-10-07

6492

reactjs jsx

我正在学习 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;

当我导出并使用该组件并刷新服务器时。服务器显示以下内容：未定义（读取“toLocaleString”）

请帮忙。我很着急！

Answer 1

尝试以下代码，并在使用 props 和 object 时注意： props.expense.date.toLocaleString

在课程中可能遗漏了 .expense 代码是否可以使用“？”符号，如其他帖子建议的 props.expense.date?.toLocaleString 。

    import "./ExpenseItem.css";

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

  return (
    <div className="expense-item">
      <div>
        <div>{month}</div>
        <div>{day}</div>
        <div>{year}</div>
      </div>
    </div>
  );
}

export default ExpenseItem;

Answer 2

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

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

<ExpenseDate date={props.date} />

Answer 3

我也得到了同样的错误： TypeError：无法读取未定义的属性（读取'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>