尝试在React中映射返回未定义

Question

我有以下Mongoose模式：

const SubmitDebtSchema = new Schema ({
firebaseId: String,
balance: [{
balanceDate: Date,
newBalance: Number
}]
});

这个数据库模式在我的父组件中使用useEffect钩子调用，并作为道具传递给我的子组件。

const fetchDebts = debts.map (debt => {
return (
<IndividualDebtCard key={debt._id}
transactions={debt} />
)
})

然后，我将道具作为变量存储在我的子组件中，并在渲染时使用另一个useEffect来控制台该变量的结果：

const debts = props.transactions
useEffect(() => {
console.log(debts)
}, [debts])

作为参考，以下是示例控制台日志的样子：

balance: Array (2) 
0 {_id: "5fea07cd143fd50008ae1ab2", newBalance: 1500, balanceDate: "2020-12-28T16:29:00.391Z"} 
1 {_id: "5fea0837b2a0530009f3886f", newBalance: 1115, balanceDate: "2020-12-28T16:30:45.217Z"}

然后我想做的是映射这个变量，选择每个"newBalance"one_answers"balanceDate"，并在我的页面上呈现它们。

然而，每次尝试加载组件时，我都会遇到一个未定义的错误。。。

这就是我迄今为止所尝试的：

{ debts.map(debt => {
return (
<div className="transaction-history">
<div className="transaction-history-entry">
<p>{debt.balance.balanceDate}</p>
<p>-£{debt.balance.newBalance}</p>
</div>
</div>
)
})}

有人能指出我哪里错了吗？我知道这会是显而易见的，但我想不通。

编辑：我认为未定义来自于我试图调用"balanceDate"one_answers"newBalance"的方式——如果我控制台记录我试图映射的内容，它将返回未定义。

Answer 1

您需要检查debts是否有值。试试这个：

{
debts.balance && !!debts.balance.length && debts.balance.map((debt, index) => {
return (
<div key={index} className="transaction-history">
<div className="transaction-history-entry">
<p>{debt.balance.balanceDate}</p>
<p>-£{debt.balance.newBalance}</p>
</div>
</div>
);
});
}