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: [{}] }时，就是说要加载一个没有字段的购物车。如果您尝试访问空对象的网址，则会得到undefined。如果尝试访问undefined的第n个元素，则会出现运行时错误。

调用诺言之后，需要一段时间才能将响应载入状态。在这段时间内，您的初始状态需要防止访问如上所述的未定义字段的情况。

有两个可行选择

this.state = { shoppingCart: [] };

或

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

最后，另一种解决方案涉及不具有默认状态，但是每次您引用状态时都要有条件引用。

如何获得属于对象数组一部分的对象内部数组的值？

1 个答案: