如何获得对象数组中的对象内的数组的值？

Question

在我的 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,
            })
        })


    }
}

Answer 1

当您声明您的初始状态为{ shoppingCart: [{}] } 时，您的意思是加载一个没有字段的购物车。如果您尝试访问空对象的 url，您将获得undefined。如果您尝试访问 undefined 的第 n 个元素，您将收到运行时错误。

调用 promise 后，需要一段时间才能将响应加载到状态。在那个时候，您的初始状态需要防止您访问上述未定义字段的情况。

有两个可行的选择

this.state = { shoppingCart: [] };

或

this.state = { shoppingCart: [ { url: [] } ] };

最后，另一种解决方案是没有默认状态，但每次引用状态时都有一个条件引用。