类型错误：无法读取未定义的属性(读取"toLocaleString")

Question

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

导出&使用该组件&刷新服务器。服务器显示如下:未定义(读取' tolocalstring ')

请帮助。我赶时间!

Answer 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>
);
}

Answer 2

我也得到相同的错误: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>

Answer 3

好吧，我觉得我疯了，我真的在做同样的反应过程，在完全相同的步骤，我想找出我做错了什么?我加了?但是现在日期不显示了。

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

<ExpenseDate date={props.date} />

Answer 4

在你的子组件中，你需要添加一个获取'date'值的prop。这样它就不会返回未定义的'date'。检查下面的示例。在ExpenseItem.js中添加

<ExpenseDate date={props.date} />

Answer 5

检查你有没有忘记传递数据

在<<p> strong> ExpenseForm.js submitHandler函数用 保存NewExpense

props.onSaveExpenseData(expenseData).

传递expenseData是至关重要的。

Answer 6

你可能已经找到了解决办法但我也在上同样的课程，我被困在了同样的部分

我注意到的是它与date. tolocalstring没有任何关系。

这个错误的发生是因为我们在不同的组件中命名变量的方式所以要确保所有接受输入的变量都有相同的名字

在我的例子中是App.js

const dummy = [{ id: "", date : new Date(),title :"Car Gas Fill Up",amount : 24.20,},]

ExpenseItem.js

<Card  className="expense-item">

<ExpenseDate date ={props.date} />
<div className="expense-item__description">
<h2>{props.title}</h2>
<div className="expense-item__price">${props.amount}</div>

</div>
</Card>

Expense.js

<Card className="expenses">
<ExpensesFilter
defaultYear={filterYear}
changeYear={filterYearChanger}
/>
{props.items.map((expense,index) => (
<ExpenseItem
key ={index}
title={expense.title}
amount={expense.amount}
date={expense.date}

/>
))}
</Card>

所以变量从App.js数组对象有相同的名称在另一个组件，他们传递信息给子组件

Answer 7

我遵循这个过程，我修复了这个，所有你需要的只是更新日期引号之间的对象

date: new Date("2020, 7, 14")

Answer 8

我在第5章渲染列表时遇到了这个问题，我在一个状态下创建了对象，如果没有，请跳过。我遇到了和你一样的问题，但是我已经把数据传递给了上面的组件。

<ExpenseDate date={props.date} />

然后我在ExpenseForm.js文件中检查我的代码，我在状态

中创建了对象

const [userInput, setUserInput] = useState({
enteredTitle: '',
enterAmount: '',
enteredDate: ''
})

然后我仔细检查我的onSubmit方法，并添加以下代码expenseData，并通过onSaveExpenseData()传递它

const submitHandler = (event) => {
event.preventDefault();
const expenseData = {
title: userInput.enteredTitle,
amount: userInput.enterAmount,
date: new Date(userInput.enteredDate)
}
props.onSaveExpenseData(expenseData);
setUserInput({
enteredTitle: '',
enterAmount: '',
enteredDate: ''
})
}

问题终于解决了。我曾经把userInput直接传递给onSubmit方法，造成了很多麻烦。好运！