我正在学习没有 redux、mobx 或任何其他库的react。之所以不使用redux等等，是因为有人告诉我，在使用库之前先学会react是很重要的。我试图从 firestore 获取数据并呈现它，但由于异步，我被困在呈现数据。我无法渲染，因为我渲染时没有获取数据。

我的react版本是 16，我练习用 firestore react。这是我的代码。

无论你给我什么建议，我都会感激你。谢谢你。

类别按钮集.js

import React from 'react';
import CategoryButton from './CategoryButton';
import {test} from '../shared/Firebase';

export default class CategoryButtonSet extends React.Component {
categories = [];

componentDidMount() {
    test().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            this.categories.push(doc.id).bind(this);
        });
    });
}

render() {
    if(this.categories.length !== 0) {
        console.log(this.categories);
        return (
            <div className="category-block">
                This block is for the category button set.
                {
                    this.categories.map(category => <CategoryButton key={category} name={category}/>)
                }
            </div>
        );
    } else {
        return <div>Loading...</div>;
      }
    }  
}

类别按钮.js

import React from 'react';

export default (props) => {
    return (
        <div className="category-block__button">
            Here's the category button.
            <button>{props.name}</button>
        </div>
    );
}