Получение данных из Firebase не отображается с React JS?

Question

Я получил приведенную ниже реакцию js cod, работающую без ошибок, но я не уверен, почему он ничего не отображает из базы данных в элементе <li>.

Когда я консоль регистрирую его в ComponentWillMount, он правильно извлекает данные.

App.js

    class FirebaseDB extends React.Component {
      constructor(props) {
        super(props);
        this.state = { messages: [] };
      }
      componentWillMount(){
        let messagesRef = firebase.database().ref('messages');
        messagesRef.on('child_added', snapshot => {
          let message = { text: snapshot.val(), id: snapshot.key };
          console.log(message);
        })
      }

      render() {
        return (
          <div>
            <ul>
              { /* Render the list of messages */
                this.state.messages.map( message => <li key={message.id}>{message.text}</li> )
              }
            </ul>
          </div>
        );
      }
    }


class App extends Component {
  render() {
    return (
      <FirebaseDB />
    );
  }
}

Answer 1

В реакции, если вы хотите, чтобы что-то отображалось на экране, вам нужно поставить state. Теперь у вас есть массив messages на вашем state, но данные, которые вы извлекаете из firebase, не добавляются в state, и в результате ничего не обрабатывается.

Я не знаком с firebase как таковым, но я думаю, что основная идея должна быть примерно такой.

componentWillMount(){
        let messagesRef = firebase.database().ref('messages');
        messagesRef.on('child_added', snapshot => {
          let message = { text: snapshot.val(), id: snapshot.key };
          const messages = [...this.state.messages]; // copy state so not to mutate
          messages.push(message);
          this.setState({messages}); // this will tell react to re-render with the newly added data
          console.log(message);
        })
      }

Answer 2

Вы никогда не устанавливаете состояние для содержания сообщений, поэтому оно никогда не будет отображаться. Вы можете попробовать

constructor(props) {
  super(props);
  this.state = { messages: [] };
}

componentWillMount(){
  let messagesRef = firebase.database().ref('messages');
  messagesRef.on('child_added', snapshot => {
    let message = { text: snapshot.val(), id: snapshot.key };
    this.setState({
      messages: [...this.state.messages, message],
    });
  })
}