如何在视图中显示数组？ React JS

Question

我从Firebase取得并有效存储的排列的值有效，但是问题是当我在视图中使用.map函数显示它们时，什么也看不到。我在做什么错了？

class Home extends Component{

state={
    products : []
  }

constructor(){
    super();
    this.obtenerProductos = this.obtenerProductos.bind(this);
}

componentDidMount(){
    this.obtenerProductos()
  }

obtenerProductos(){
    const referencia = firebase.database().ref().child('products').orderByKey();
    let products = []
    referencia.once('value', snap => {
    snap.forEach(child => {

        var productElement = {
            id:          child.key, 
            name:        child.val().name, 
            price:       child.val().price,
            image:       child.val().image,
            category:    child.val().category,
            description: child.val().description
        };

        //this.products.push(productElement);
        products.push(productElement);
       });
    });

    this.setState({
        products
    })
}

在渲染功能中，我想显示产品名称，但对我来说什么也没有。我不明白。

render(){
console.log(this.state.products);
return( 
<Fragment>
<ul>
    <h1>Text</h1>
    {this.state.products.map((item, index) => {
        return <h1 key={index}>{item.name}</h1>
    })
    }
</ul>
</Fragment>
);}}

在console.log的render函数中，我打印以下内容，一个空白，另一个带有从firebase带来的数据。