如何在 react + firestore 中呈现异步数据？答案

【问题标题】：How to render async data in react + firestore?如何在 react + firestore 中呈现异步数据？
【发布时间】：2018-05-14 23:35:00
【问题描述】：

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

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

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

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>
    );
}

【问题讨论】：

标签： javascript reactjs google-cloud-firestore

【解决方案1】：

您正在检索数据但没有设置您的状态，您根本没有任何状态。这就是为什么您的组件在获取数据后不会重新渲染的原因。也许一种方法可能是这样的（可能有更好的方法）：

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

【讨论】：

哦，我认为使用 'state' 是 redux 的方式，并想到了另一种方式。谢谢我试试
哦，那再仔细看一下 React 文档：）“状态”在 React 中占有很大的位置。

【解决方案2】：

请看一下 Firestorter，如果它正好用于此目的，并且您不需要创建 redux 存储或任何东西。

https://github.com/IjzerenHein/firestorter

【讨论】：