Reactjs 反应组件赢得'；即使在重新渲染后也无法呈现新状态

基本上，我遇到了一个问题，react组件不会呈现来自其状态的数组。状态确实包含我想要的数组，并且在填充数组变量时再次调用render方法，但没有显示任何内容

我尝试过用伪数据预先填充state数组，它呈现得很好。但是当我使用一个函数填充数组时，页面会更新，什么也不会显示。如果我检查组件的状态，它会有我想要的数据，但是组件的渲染方法似乎不想显示它

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（）后，代码会显示一个来自组件状态的数组项目符号列表，但不会显示任何内容。虽然我已经通过开发工具确认数据确实存在于scopes状态数组中，但render没有显示它。

在

getScopes

中，您将

tempScopes

填充到Promise的

中，然后
异步运行。
但在它下面，您也会立即调用
setState
，这意味着在调用
setState
时，
tempScopes
数组仍然为空。
您应该将调用移动到
setState
中，然后移动到
中。大概是这样的：

       .then((querySnapshot) => {
            querySnapshot.forEach(function(doc) {
                tempScopes.push(doc.data().address);
            })
            this.setState({scopes:tempScopes});
        })

和往常一样，我在发帖后不久就得到了答案。我认为这些问题源于getScopes函数中的绑定。此代码修复了该问题

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

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