React：未捕获的类型错误：无法读取未定义的属性（读取‘0’）
我需要将此信息用于我的购买完成页面，但我收到此错误： 未捕获 TypeError：无法读取未定义的属性（读取“0”）
我的代码是：
import { getFirestore } from "../firebase/firebase";
import { useParams } from "react-router-dom";
function ConfirmacionCompraPage() {
const {orderId} = useParams();
const [order, setOrder] = useState({});
useEffect(() => {
const db = getFirestore();
db.collection("ordenes")
.doc(orderId)
.get()
.then((res) => setOrder({ id: res.id, ...res.data() }));
}, [orderId]);
return (
<div>
<h2>Detalle de su compra: {order.items[0].item.paleta}</h2>
</div>
);
};
export default ConfirmacionCompraPage ;```
And my Firestore is:
[![Firestore][1]][1]
[1]: https://i.sstatic.net/cGdST.png
order
的初始状态是一个空对象：
const [order, setOrder] = useState({});
因此
order.items
为
undefined
，而
order.items[0]
则尝试读取
undefined
的索引
0
。
您可以设置一些初始状态：
const [order, setOrder] = useState({ items: [{ item: { paleta: '' }}]});
或者使用空检查（如果它适用于数组索引？我目前实际上还不确定）：
<h2>Detalle de su compra: {order?.items?[0]?.item?.paleta}</h2>
或者有条件地渲染：
{
(order && order.items && order.items.length > 0 && order.items[0].item)
? <h2>Detalle de su compra: {order?.items?[0]?.item?.paleta}</h2>
: null
}
无论您采用哪种方法，这里的要点是您正在深入研究对象，而没有检查该对象是否具有您正在使用的任何属性。
您还可以简化以下任何操作：如果您实际上只需要一个值，则可以通过仅将值
paleta
保留在状态中而不是整个
order
对象来实现上述目的。因此状态将类似于：
const [paleta, setPaleta] = useState('');
并且您在设置它时会深入了解属性：
.then((res) => setPaleta(res.data().items[0].item.paleta));
并在渲染中更简单地引用它：
<h2>Detalle de su compra: {paleta}</h2>
当然，这仅适用于您只使用一个值的情况。如果为了简洁而简化了此示例，并且您实际上需要更多对象，那么是的，请将整个对象保留在状态中。但从逻辑上讲，在渲染的其余部分中应用空检查，以确保在渲染之前填充对象。
您的错误可能是由
{order.items[0].item.paleta
引起的，因为无法读取
undefined
对象的属性。
您的
order
状态最初持有一个空对象，第一次渲染时就是这种情况，直到您的
firebase
响应通过
useEffect
引发重新渲染。
-
解决方案是有条件地调用您的
{order.items[0].item.paleta，如下所示：
return (
<div>
{order && <h2>Detalle de su compra: {order?.items?[0]?.item?.paleta}</h2>}
</div>
);
或
return (
<div>
<h2>Detalle de su compra: {order ? order?.items?[0]?.item?.paleta : "dummy
temporary string"}</h2>}
</div>
);
如果仍然不起作用，请使用
order && order?.items?.length && order?.items?[0]?.item && 进行测试订单？.items？[0]？.items？.paleta