ReactJS+；FireStore数据映射问题

我正在编写一个小程序，从Firestore数据库中获取类别并在网页中显示为列表

我的代码如下所示：

class Category extends Component {
  constructor() {
    super();
    this.state = {'Categories': []}
  }
  render() {
    let categoryList = null;
    if (Array.isArray(this.state.Categories)) {
      console.log(this.state.Categories);
      categoryList = this.state.Categories.map((category) =>  {
        return <li>{category.name}</li>
      });
    }
    return(
      <ul>{categoryList}</ul>
    );
  }
  componentWillMount() {
    // fetch the data from the Google FireStore for the Category Collection
    var CategoryCollection = fire.collection('Category');
    let categories = [];
    CategoryCollection.get().then((snapshot)=> {
      snapshot.forEach ((doc) => {
        categories.push(doc.data());
      });
    }).catch((error) => {
      console.log("Error in getting the data") 
    });
    this.setState({'Categories': categories});
  }
}

类类别扩展组件{
构造函数（）{
超级（）；
this.state={'Categories'：[]}
}
render（）{
设categoryList=null；
if（Array.isArray（this.state.Categories））{
log（this.state.Categories）；
categoryList=this.state.Categories.map（（category）=>{
返回
{category.name}
});
}
返回(
{categoryList}
);
}
组件willmount（）{
//从Google FireStore获取类别集合的数据
var CategoryCollection=fire.collection（'Category'）；
设类别=[]；
CategoryCollection.get（）。然后（（快照）=>{
snapshot.forEach（（doc）=>{
categories.push（doc.data（））；
});
}).catch（（错误）=>{
log（“获取数据时出错”）
});
this.setState（{'Categories'：Categories}）；
}
}

我可以获取数据，甚至可以填充this.state.Categories，但是映射函数没有执行

console.log语句生成一个值数组，但未执行render中的map函数。有什么想法吗

Console.log输出：

---

您在处理数据检索时出错。在最后一行中，categories仍然为空，因此它会使用空数据集触发setState。应该是什么谎言

componentWillMount() {

    fire.collection('Category').get()
        .then(snapshot => {
            const categories = snapshot.map(doc => doc.data());
            // sorry, but js object should be pascal cased almost always
            this.setState({ categories }); 
         })
         .catch(error => {
             console.log("Error in getting the data") 
         });

}

---

仅在数据存在时返回数据。最简单的方法是将

{categoryList}

替换为

{this.state.categories&&categoryList}

我只需稍加修改即可使其工作（将此.setState移到回调内部）。老实说，我还是不明白其中的区别

附言：我来自PHP开发，这是我进入ReactJS的第一步

componentWillMount() {

    // fetch the data from the Google FireStore for the Category Collection
    var categoryCollection = fire.collection('Category');
    let categories = [];
    categoryCollection.get().then((snapshot)=> {
        snapshot.forEach ((doc) => {
            categories.push(doc.data());
        }); 
        if (categories.length > 0) {
            this.setState({'Categories': categories});
        }
    }).catch((error) => {
       console.log("Error in getting the data"); 
    });
    // this.setState({'Categories': categories});

}

你好您的代码运行良好：（对不起，我已经清理了一点）。此外，我建议在HOC或render-props组件中获取数据，并将此组件留作演示用途，以分离CENCERN