Question

我使下面的react 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

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

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

作为回应，如果您想在屏幕上显示某些内容，则需要戴上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);
        })
      }

从Firebase获取数据无法与React JS一起显示？

2 个答案: