React Component即使重新渲染后也不会渲染新状态

Question

[基本上，我遇到了一个问题，即React组件将不会渲染来自其状态的数组。该状态确实包含我想要的数组，并且在填充数组var时再次调用render方法，但没有任何显示。

我已经尝试用伪数据预填充状态数组，它呈现得很好。但是，当我使用函数填充数组时，页面将更新，并且什么也没有显示。如果我检查组件的状态，则它具有所需的数据，但是组件的render方法似乎不想显示它。

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（）函数后所需的数据（作用域），但是render方法不显示数据。

如果我用虚拟字符预填充数据，然后像下面那样在componentDidMount（）中注释掉getScopes（）并保持其他所有相同，则虚拟字符显示就很好。

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（）之后，代码将显示来自组件状态的数组的项目符号列表，但是没有任何作用。我已经通过开发工具确认了数据确实存在于范围状态数组中，但是render并未显示它。

Answer 1

您正在以异步方式运行的Promise的tempScopes中填充then。但是在它下面您也立即调用setState，这意味着在您调用setState时，tempScopes数组仍为空。您也应该将呼叫移到setState内的then。