Компонент React не будет отображать новое состояние даже после повторной визуализации

В основном у меня проблема, когда реагирующий компонент не отображает массив, исходящий из его состояния. Состояние действительно содержит массив, который я хочу, и метод рендеринга вызывается снова, когда массив var заполнен, но ничего не отображается.

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

import React, { Component } from 'react';
import { withAuthorization } from '../Session';
import { withFirebase } from '../Firebase'; //
import 'firebase/firestore';

const Home = () => (
  <div>
    <h1>Home Page</h1>
    <p>Signed in users only</p>
    <hr />

    <h1>Available Scopes</h1>
    <ScopeRender />

  </div>
);


class ScopeRenderBase extends Component {

    constructor(props) {
        super(props);
        this.state = {
            scopes: []
        }
        //this.componentDidMount = this.componentDidMount.bind(this);
    }

    async componentDidMount() {
        await this.getScopes();
        //console.log(this.state.scopes);
    }

    componentDidUpdate() {
        //console.log(this.state.scopes);
    }

    getScopes() {
        let tempScopes = [];
        this.props.firebase.db.collection("scopes").where("status", "==", 1).get()
            .then( (querySnapshot) => {
                querySnapshot.forEach(function(doc) {
                    tempScopes.push(doc.data().address);
                })
            })
            .catch(function(error) {
                console.log("Error getting documents: ", error);
            });

        //console.log(tempScopes);
        this.setState({ 
            scopes: tempScopes
        });
    }

    render() {
        const displayPosts = this.state.scopes.map((scope, index) =>
            <li key={index}>{scope}</li>
        );
        console.log(this.state.scopes);
        return(
            <div>
                <div>{this.state.scopes}</div>
                <ul>{displayPosts}</ul>
            </div>
        );
    }

}

const ScopeRender = withFirebase(ScopeRenderBase);

const condition = authUser => !!authUser;

export default withAuthorization(condition)(Home);
export { ScopeRender };

С помощью этого кода состояние содержит данные (области), которые я хочу получить после вызова функции getScopes (), но метод рендеринга не отображает данные.

Если я предварительно заполню данные фиктивными символами и закомментирую getScopes () в componentDidMount (), как показано ниже, и сохраню все остальное без изменений, фиктивные символы будут отображаться нормально.

class ScopeRenderBase extends Component {

    constructor(props) {
        super(props);
        this.state = {
            scopes: ['a','b','c']
        }
        //this.componentDidMount = this.componentDidMount.bind(this);
    }

    async componentDidMount() {
        //await this.getScopes();
        //console.log(this.state.scopes);
    }

Я ожидаю, что код отобразит маркированный список массива, поступающего из состояния компонентов после вызова getScopes (), как только компонент монтируется, но вместо этого ничего не мешает. Я подтвердил, однако, с помощью инструментов разработки, что данные действительно существуют в массиве состояний области действия, хотя рендеринг этого не показывает.