Как я могу получить значения массива, который находится внутри объекта, который является частью массива объектов?

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. Если вы попытаетесь получить доступ к n-му элементу undefined, вы получите ошибку во время выполнения.

После того, как вы вызовете обещание, пройдет немного времени, прежде чем ваш ответ будет загружен в состояние. В это время ваше начальное состояние должно быть защищено от случаев, когда вы обращаетесь к полям undefined, как описано выше.

Возможны два варианта:

this.state = { shoppingCart: [] };

или

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

Наконец, другое решение предполагает отсутствие состояния по умолчанию, но условную ссылку каждый раз, когда вы ссылаетесь на состояние.