在我的 componentWillMount 中，我有一个函数调用当前用户文档中的“购物车”字段。
这个购物车字段是一个对象数组，每个对象都有一个包含图像 URL 数组的字段。
我的问题是我在组件的状态中声明了我想要的变量“shoppingCart”，然后在 componentWillMount 中，我将此值分配给返回的对象数组（购物车对象）。
当我测试是否可以获取其中一个对象内的数组的第一个链接时，程序会抱怨该字段未定义并继续崩溃。我注意到，根据我声明状态变量的方式，我可以从这些对象中获取或多或少的信息。
例如：
如果我像这样声明我的状态变量：
this.state={
shoppingCart:"",
}
然后我只能到shoppingCart[n]中的对象，
但是，如果我像这样声明我的状态：
this.state={
shoppingCart:[{}],
}
我可以进入我选择的对象领域，例如：
shoppingCart[n].name;
但是当涉及到尝试获取对象内部数组的值之一时，例如：
shoppingCart[n].url[n]
这是不可能的。
我是否必须以某种方式声明状态变量？
export const getCartItems = (props) => {
return (dispatch, getState, { getFirebase, getFirestore }) => {
const firebase = getFirebase();
const firestore = getFirestore();
const storage = firebase.storage();
return
firestore.collection('users').doc(props.auth.uid).get().then((user)=>{
return user.data().shoppingCart;
})
}
}
constructor(props) {
super(props)
this.state = {
shoppingCart: [{}],
}
}
componentWillMount() {
if (this.props.auth.uid) {
this.props.getCartItems(this.props).then((shoppingCart) => {
this.setState({
shoppingCart,
})
})
}
}
当您将初始状态声明为 时{ shoppingCart: [{}] }，您是在说要加载一个没有字段的购物车。如果您尝试访问空对象的 url，您将获得undefined. 如果您尝试访问 undefined 的第 n 个元素，则会出现运行时错误。
在你调用 promise 之后，在你的响应加载到状态之前有一段时间。在那个时候，您的初始状态需要防止您如上所述访问 undefined 字段的情况。
两个可行的选择是
this.state = { shoppingCart: [] };
或者
this.state = { shoppingCart: [ { url: [] } ] };
最后，另一种解决方案涉及没有默认状态，但每次引用状态时都有条件引用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句