我在React + Firebase上的组件中看不到我的笔记吗？

Question

我正在使用React和Firebase，输入工作正常，数据已传输到Firebase，但是注释未在我的组件中呈现，这是什么错误？

这是我的repo，请帮助我以哪种方式可以解决问题，我按照这封信的教程进行操作，但是我不能解决此问题

我的应用组件

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Nota from './componentes/Nota';
import Forma from './componentes/Forma';
import {DB_CONFIG} from './config/config';
import firebase from 'firebase/app';
import 'firebase/database';

class App extends Component {
  constructor() {
    super();
    this.agregarNota = this.agregarNota.bind(this);
    this.app = firebase.initializeApp(DB_CONFIG);
    this.basedatos = this.app.database().ref().child('notas');
    // this.state = {
    //   notas : [
    //     {id: 1, notaContenido: 'primera nota' },
    //     {id: 2, notaContenido: 'segunda nota' }
    //   ]
    // }
      this.state = {
        notas: []
      }
  }
  componentWillMount() {
    const notasPrevias = this.state.notas;
    this.basedatos.on('child_added', snap => {
      notasPrevias.push({
        id: snap.key,
        notaContenido: snap.val().notaContenido
      })
    })

    this.setState({
      notas: notasPrevias
    })
  }
  agregarNota = (nota) => {
    // introduce la nueva nota dentro del arreglo
    this.basedatos.push().set({ notaContenido: nota });
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <div className="App-intro">
          <h2>Lista React + Firebase</h2>
          <div>
          {
            this.state.notas.map(nota => {
              return (
                <Nota
                key={nota.id}
                notaContenido={nota.notaContenido}
                notaId={nota.id}
                />
              )
            })
          }
          </div>
          <Forma
          agregarNota={this.agregarNota}
          />
        </div>
      </div>
    );
  }
}

export default App;

表格

    import React from 'react';
    class Forma extends React.Component {
        constructor(props) {
            super(props);
            this.controlaEntrada = this.controlaEntrada.bind(this);
            this.apuntarNota = this.apuntarNota.bind(this);
            this.state = {
                nuevaNota: ''
            }
        }
        // controla el input 
        controlaEntrada = (e) => {
            e.preventDefault();
            this.setState({nuevaNota: e.target.value})
            //console.log(this.state.nuevaNota)
        }
        // establece la nota nuevamente a un string vacio
        apuntarNota () {
            this.props.agregarNota(this.state.nuevaNota)
            this.setState({nuevaNota: ''})
        }
        render() { 
            return (<div>
                <input 
                placeholder='ingresa una nota'
                value={this.state.nuevaNota}
                onChange={this.controlaEntrada}
                />
                <button
                onClick={this.apuntarNota}
                >add nota</button>
                </div>)
        }
    }

    export default Forma;

and the **Note** component

import React from 'react';
import PropTypes from 'prop-types';
class Nota extends React.Component {
    constructor(props) {
        super(props);
        this.notaContenido = props.notaContenido;
        this.notaId = props.notaId;
    }
    render() { 
        return (
            <div key={this.notaId}>
                <h2>{this.notaContenido}</h2>
            </div>)
    }
}
Nota.propTypes = {
    notaContenido: PropTypes.string
}
export default Nota;