ReactJS: цикл по объекту. Почему «item» не работает как переменная внутри метода push?

Question

У меня есть данные в пожарном хранилище облачных баз.Эти данные я хочу разместить в своем реагирующем СПА в виде разбитого на страницы списка.Пример данных:

items {
    item1{
        descrHead: "white square",
        descrText: "lorem",
        imageUrl: "assets/portfolio/mini-stubs/whiteSquare-min.png",
        status: "available"
    },
    item2{
        descrHead: "blue square",
        descrText: "lorem",
        imageUrl: "assets/portfolio/mini-stubs/blueSquare-min.png",
        status: "available"
    },
    ...
    item N
}

Я новичок в JS, и у меня нет четкого понимания, как работать с объектами.Я пытаюсь сделать это, используя циклы forEach и forIn:

getDataFromDB() {
    db.collection("items").get().then((querySnapshot) => {
        let newState = [];

        // this test shows that connection works, 
        // we see the table with the first element data
        console.table(querySnapshot.docs[0].data());

        let allRecivedData = querySnapshot.docs; 

        allRecivedData.forEach((key)=>{

            let items = key.data();
            for (let item in items) {

                // this test shows me 
                // 80 correct pairs key:value
                console.log(`${item}: ${items[item]}`)

                newState.push({
                    item: items[item]
                });
            }
        })

        this.setState({
            items: newState
        });
    }
}

Теперь в моем состоянии это:

state
    loading: true,
    error: false,
    items: 
    |--0: {...}
        |--item: "assets/portfolio/mini-stubs/whiteSquare-min.png"
    |--1: {...}
        |--item: "white square"
    |--2: {...}
        |--item: descrText: "lorem"
    |--3: {...}
        |--item: "assets/portfolio/mini-stubs/whiteSquare-min.png"
    |--4: {...}
        |--item: "blue square"
    |--5: {...}
        |--item: descrText: "lorem"
    ...

Почему все эти элементы начинаются со слова "item"?Почему «item» не работает как переменная внутри метода push?Как разделить «элементы» на блоки: item1 {}, item2 {} ...?

Когда мой компонент смонтирован, я хочу получить данные с сервера и перевести их в состояние компонента.Ожидаемое состояние:

state
    loading: true,
    error: false,
    items: 
    |--item1: 
        |--imageUrl: "assets/portfolio/mini-stubs/whiteSquare-min.png",
        |--descrHead: "white square",
        |--descrText: "lorem"
    |--item2: 
        |--imageUrl: "assets/portfolio/mini-stubs/whiteSquare-min.png",
        |--descrHead: "blue square",
        |--descrText: "lorem"
    ...
    |--itemN: 

Answer 1

здесь

 newState.push({
                    item: items[item]
                });

вы выдвигаете новый объект со свойством с именем item, содержащий ваш элемент вашей итерации. Вы не сохраняете имя. Затем вы помещаете этот массив объектов с именем свойства item в другой объект в вашем штате с именем items. Это сделано здесь

this.setState({
            items: newState
        });

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

let newState = {};
allRecivedData.forEach((key)=>{

    let items = key.data();
    this.setState(prevState => ({ items: { ...prevState.items, ...items } }));
})

с помощью ...prevState.items вы сохраняете предыдущие элементы, а с помощью ...items вы расширяете его новыми, сохраняя имена.

Тогда вам больше не нужно использовать переменную newState.