Question

从 Firebase 获取的数据无法通过 React JS 显示？

2018-07-01

2154

reactjs firebase firebase-realtime-database

我让下面的 react js 代码运行，没有任何错误，但不确定为什么它没有在 <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

您从未将状态设置为包含消息，因此它永远不会呈现。您可以尝试

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],
    });
  })
}

Answer 2

在 React 中，如果您希望在屏幕上显示某些内容，则需要将其置于 state 上。现在您的 state 上确实有一个 messages 数组，但您从 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);
        })
      }