尝试在react ts中打印数组元素的和时出现未定义错误

Question

Getting对象可能在order.reduce行"未定义"。打印所有金额后，尝试打印所有金额的总和。

<div>
{orders.map(({ id, totalAmount }) => {
return (
<div key={id}>
<div>{totalAmount}</div>
</div>
)
})}
Total: {
orders.reduce(
(t, k) => (t + k.totalAmount),
0
)
}
</div>

Answer 1

之所以会发生这种情况，是因为TypeScript认为数组orders数组可以是未定义的。要解决此问题，您可以进行类似的检查

const Component = () => {
return (
<div>
{orders && (
<div>
{orders.map(({ id, totalAmount }) => {
return (
<div key={id}>
<div>{totalAmount}</div>
</div>
);
})}
Total: {orders.reduce((t, k) => t + k?.totalAmount, 0)}
</div>
)}
</div>
);
};