代码之家 › 专栏 › 技术社区 › StackUnderFlow

从firebase获取的数据不使用react js显示?

firebase-realtime-database firebase reactjs

StackUnderFlow · 技术社区 · 7 年前

我运行了下面的react js cod,没有错误,但不确定为什么它没有在 <li> 元素。

当我控制台将其登录到组件willmount时,它会正确地提取数据。

应用程序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 />
    );
  }
}

2 回复 | 直到 7 年前

imjared 7 年前

您永远不会将状态设置为包含消息,这样它就永远不会呈现。你可以试试

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

Chaim Friedman 7 年前

在react中,如果你想在屏幕上显示一些东西,你需要把 state 是的。现在你有了 messages 在您的 状态 ,但从firebase检索的数据不会添加到 状态 ,因此不会渲染任何内容。

我对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);
        })
      }

推荐文章

TOM · 检查Firebase数据库子项是否已存在,如果不存在,添加它的最佳方法是什么?

8 月前

Guy Sadoun · 如果正在监听的引用被删除,ValueEventListener是否会继续监听?

1 年前

moco · 通过CLI向Firebase实时数据库发送有效JSON文件时出现错误400

1 年前

MN Dijital · 为什么只显示新添加的数据而不显示所有数据?

1 年前

Computable · 未验证请求的Firebase应用程序检查(RTDB)失败模式

1 年前

Harsh Master · 为android应用程序实现自动通知

1 年前

Jakub Olszewski · com.google.firebase.database.DatabaseException:无法将java.lang.Boolean类型的值转换为String这是怎么回事?

1 年前

mkty · 如何使用react中的map打印JSON数据

1 年前

Rohan Raj · 如何在函数中更改firebase实时数据库的子级值,我试过了,但不起作用。请使用kotlin

1 年前

Michel · 使用Firebase CLI选择文档

1 年前