Как вывести асинхронные данные в реагировать + FireStore?

Question

Я учусь реагировать без приставки, мобкса или каких-либо других библиотек. Причина, по которой я не использую избыточность и т. Д., Заключается в том, что кто-то сказал мне, что важно заставить реагировать перед использованием библиотек. Я пытаюсь получить данные из firestore и отрендерить их, но из-за асинхронности я застрял для рендеринга данных. Я не могу отрендерить, потому что я не получаю данные при рендеринге.

Моя версия реакции - 16, и я практикую реакцию с пожарным. Вот мой код

Я буду признателен вам за все, что вы дадите мне свой совет. Спасибо.

---

CategoryButtonSet.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>;
      }
    }  
}

---

CategoryButton.js

import React from 'react';

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

Answer 1

Pease взгляните на Firestorter, если он существует именно для этой цели, и вам не нужно создавать магазин с избыточностью или что-то еще.

https://github.com/IjzerenHein/firestorter

Answer 2

Вы извлекаете данные, но не устанавливаете свое состояние, у вас вообще нет состояния.Вот почему ваш компонент не рендерится после получения данных.Может быть, один из подходов может быть таким (могут быть и лучшие способы):

export default class CategoryButtonSet extends React.Component {

    state = {
        categories: [],
    };

componentDidMount() {
    test()
       .then( querySnapshot => querySnapshot.map( doc => doc.id ) )
       .then( data => this.setState( { categories: data } ));
}

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