React Native - невозможно получить элемент в массиве или показать элементы из массива в списке

Question

Я пытался отлаживать это в течение нескольких часов, но безрезультатно.Я написал этот скрипт, который в основном, когда компонент загружает информацию из моей базы данных Firestore.Затем я записываю один элемент из массива на консоль, в результате чего получается undefined.Я не понимаю, почему он может показать мне полный массив, но не один элемент.А затем весь массив Array, в результате чего получается полный массив (частичное изображение показано ниже).

Основная цель этого компонента - создать список элементов, как показано в компоненте списка, но ничего не отображается.Мое первое предположение состоит в том, что метод получения информации из базы данных является асинхронным, но будет ли это иметь значение, если состояние будет обновлено?Разве приложение не должно перерисовываться?

Вот фрагмент моего кода, и помощь будет принята с благодарностью!

export default class ItemScreen extends Component {

  constructor () {
    super()
    this.state = {
      items: [],
    }
  }

  componentDidMount() {
    var items = []
    firebase.firestore().collection("items").get().then(function(querySnapshot) {
      querySnapshot.forEach(function(doc) {
          items.push(doc.data());
      });
    })
    this.setState({items: items});
    console.log(items[1])
    console.log(items)
  }

  render() {
    const { items } = this.state
    return (
        <View style={styles.container}>
          <SearchBar
            lightTheme
            onChangeText={(text) => console.log(text)}
            onClearText={() => console.log("cleared")}
            placeholder='Type Here...' 
            containerStyle={{width: "100%"}}
          />
          <List containerStyle={{width: "100%"}}>
            {
              items.map((l) => (
                <ListItem
                  roundAvatar
                  avatar={{uri:l.image}}
                  key={l.name}
                  title={l.name}
                />
              ))
            }
          </List>
        </View>
    );
  }
}

Answer 1

Попробуйте реструктурировать что-то более похожее на

var items = []
var self = this;
firebase.firestore().collection("items").get().then(function(querySnapshot) {
  querySnapshot.forEach(function(doc) {
      items.push(doc.data());
  });
  self.setState({items: items});
  console.log(items[1])
  console.log(items)
})

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