Question

我的学习反应没有redux，mobx或任何其他库。我之所以不使用redux，等等，是因为有人告诉我在使用库之前使用它做出反应非常重要。我试图从firestore获取数据并进行渲染，但由于异步，我坚持渲染数据。我无法渲染，因为渲染时我无法获取数据。

我的反应版本是16，我练习与firestore做出反应。这是我的代码。

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

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

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

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

Answer 2

Pease看看Firestorter，如果完全存在于此目的，你不需要创建一个redux商店或任何东西。

https://github.com/IjzerenHein/firestorter

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

2 个答案: