无法使用Firebase中的道具显示我的数据

Question

我试图在ProductList中显示来自Firebase的数据。对于我内部的每个产品，我都调用Page ProductItem。我可以使用console.log（产品）从Firebase读取数据，但我无法在我的ProductItem中使用道具显示它们......

这里找不到问题是代码

index.js

import React from 'react';
import ProductList from '../Product/ProductList';
import Firebase from 'firebase';

class HomePage extends React.Component {
  constructor() {
    super();

    //POUR AVOIR UN ARRAY DERIERE LE STATE
    //getInitialState = function() {
    //  productList : {
    //                   product : 1,
    //                   product : 2
    //                },
    //
    //}
    //appel : this.state.productList[0];

    this.state = {
      productList: []
    }
  }

  componentWillMount() {
    var firebaseRef = new Firebase('https://codehunt-one.firebaseio.com/');
    firebaseRef.child("products").on('value', (snapshot) => {
      var products = snapshot.val();


      this.setState({
        productList: [products]
      })
    });
  }

  render() {
    return (
      <section>
        <header>
          <img src="img/banner.jpeg" width="100%" />
        </header>

        <section>
          <section className="container">
              {
                this.state.productList
                ?
                <ProductList productList={this.state.productList}/>
                :
                null
              }

          </section>
        </section>
      </section>
    );
  }
}

export default HomePage;

ProductList.js

import React from 'react';
import ProductItem from './ProductItem';

class ProductList extends React.Component {
  render() {
    return (
      <ul className="product-list">
        {
          this.props.productList.map(function(item, idx) {
          return <ProductItem key={idx} {...item}/>
          })
        }
      </ul>
    );
  }
}

export default ProductList;

ProductItem.js

import React from 'react';
import ProductPopup from './ProductPopup';

class ProductItem extends React.Component {
  constructor() {
    super();
    this.state = {
      productPopupStatus: false
    }
  }

  showProductPopup = () => {
    this.setState({productPopupStatus: true});
  };

  hideProductPopup = () => {
    this.setState({productPopupStatus: false});
  };

  renderUpvoteButton() {
    return (
      <a className="upvote-button" href="#">
        <span>
          <i className="fa fa-sort-asc"></i>
        </span>
        {this.props.upvote}
      </a>
    );
  }

  renderNewWindowIcon() {
    return (
      <a className="product-item-link" href={this.props.link}>
        <span>
          <i className="fa fa-external-link"></i>
        </span>
      </a>
    );
  }

  renderInfoSession() {
    return (
      <section className="product-item-info">
        <a href="#" onClick={this.showProductPopup}>
          <h2>{this.props.name}</h2>
        </a>
        <p>{this.props.description}</p>
        <a href="#">
          <img className="small-avatar" src="{this.props.maker.avatar}" />
        </a>
      </section>
    );
  }

  render() {
    return (
      <li className="product-item">
        {this.renderUpvoteButton()}
        <img className="product-item-media" src="{this.props.media}" />
        {this.renderInfoSession()}
        {this.renderNewWindowIcon()}
        <ProductPopup status={this.state.productPopupStatus} hidePopup={this.hideProductPopup}/>
      </li>
    );
  }
}

export default ProductItem;

以下是我在Firebase中导入的Json

{
  "comments" : {
    "2" : {
      "-KBADrfjqiJrzayJpafg" : {
        "avatar" : "https://scontent.xx.fbcdn.net/hprofile-xap1/v/t1.0-1/p100x100/19205_1390103141316397_178491714063818442_n.jpg?oh=230b9c097e44f9149e4498a6cb656557&oe=57674633",
        "content" : "Nice code",
        "name" : "Ironman Demo"
      }
    }
  },
  "products" : {
    "1" : {
      "description" : "Code for anyone",
      "link" : "https://langmine.com",
      "maker" : {
        "avatar" : "/img/hieu.jpeg",
        "name" : "hieu"
      },
      "media" : "/img/codecademy.jpeg",
      "name" : "Codecademy",
      "upvote" : 170
    },
    "2" : {
      "description" : "Code for startups",
      "link" : "https://code4startup.com",
      "maker" : {
        "avatar" : "/img/leo.jpeg",
        "name" : "leo"
      },
      "media" : "/img/code4startup.jpeg",
      "name" : "Code4Startup",
      "upvote" : 287
    },
    "-KB5GFseWv1_Np-Tj4Q6" : {
      "description" : "Code to be fun",
      "link" : "codefun.abc",
      "maker" : {
        "avatar" : "https://scontent.xx.fbcdn.net/hprofile-xap1/v/t1.0-1/p100x100/19205_1390103141316397_178491714063818442_n.jpg?oh=230b9c097e44f9149e4498a6cb656557&oe=57674633",
        "name" : "Ironman Demo"
      },
      "media" : "http://it.codemotionworld.com/wp-content/uploads/2014/01/keep-calm-and-write-code-1.png",
      "name" : "CodeFun",
      "upvote" : 5
    }
  },
  "users" : {
    "1556648581328518" : {
      "avatar" : "https://scontent.xx.fbcdn.net/hprofile-xap1/v/t1.0-1/p100x100/19205_1390103141316397_178491714063818442_n.jpg?oh=230b9c097e44f9149e4498a6cb656557&oe=57674633",
      "id" : "1556648581328518",
      "name" : "Ironman Demo"
    }
  },
  "votes" : {
    "1" : {
      "1556648581328518" : true
    },
    "2" : {
      "1556648581328518" : true
    },
    "-KB5GFseWv1_Np-Tj4Q6" : {
      "1556648581328518" : true
    }
  }
}