TypeError:debts.map 不仅仅是 chrome React 上的函数

Question

所以我有这个代码

export const Balance = () =>{
const {debts} = useContext(GlobalContext);
const amounts = debts.map(debt => debt.amount);
const total = amounts.reduce((acc, item) => (acc += item), 0).toFixed(2);
return (
<div className="balance-container">
<div>
<h4>סכום כולל</h4>
<h2><CountUp start={0} end={Number(total)} duration={2.5} separator=","></CountUp>&#8362;</h2>
</div>
</div>
)

我得到的错误是： TypeError： debts.map 不是一个函数

并且应用程序崩溃。 奇怪的是，当我将 URL(我的本地主机和端口(复制到 Firefox 或移动设备中的 Chrome 时，应用程序运行良好......

可能是什么问题？

Answer 1

这很可能是因为debts为 null 或未定义。 惯用的解决方案是在初始化该值时将该值默认为空数组：

const debts = []

而不是(你现在可能正在做的事情(

const debts = null

当您在空数组上调用 .map 时，它将不起作用，因此如果尚未添加值，它将得到优雅处理。 当债务数组填充值时，它们将被呈现。