React Native: получение данных из Firebase

Question

Я просто пытаюсь получить данные из базы данных в Firebase, и вот что у меня есть

var userList = [];
    
    firebase.database()
  .ref('/users/')
  .once('value')
  .then(snapshot => {
    snapshot.forEach((doc) => {
      
      userList.push(doc.val());
      
    });
    
  });
  
  console.log(userList);

Несмотря на то, что я копирую и вставляю этот код из учебника, userList снаружи пуст снимка. Вы можете сказать мне, почему это так?

Answer 1

Запрос к firebase является асинхронным, поэтому console.log(userList); вызывается перед вызовом userList.push(doc.val());.

Вы должны сделать userList переменной состояния компонента, чтобы при обновлении ваш компонент повторно отображался.

Должно работать примерно следующее:

class UserListComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      userList: [],
    };
  }
  
  componentDidMount() { 
    this.getUsers();
  }

  getUsers() {
    firebase
      .database()
      .ref('/users/')
      .once('value')
      .then((snapshot) => {
        snapshot.forEach((doc) => {
          this.setState({
            userList: [...this.state.userList, doc.val()],
          });
        });
      });
  }

  render() {
    return (
      <View>
        {this.state.userList.map((item) => {
          return (
            <View>
              <Text>{item.name}</Text>
            </View>
          );
        })}
      </View>
    );
  }
}