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

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

firebase-realtime-database firebase reactjs

StackUnderFlow · 技术社区 · 6 年前

我运行了下面的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 回复 | 直到 6 年前

imjared 6 年前

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

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 6 年前

在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);
        })
      }

推荐文章

Veselin Zinkov · Firebase实时数据库Web界面可视化错误

2 年前

Gusta · 为什么是我的物品。values()当我的对象数组有匹配的值时返回false?

2 年前

Gusta · 为什么我在尝试设置状态时会得到太多渲染?

2 年前

Alex · 如何使用javascript在firebase中进行过滤?

2 年前

Salvo · 函数无法读取useState参数

2 年前

Ejaj Ahmad · 如何从函数返回firebase数据?

2 年前

Amit Yadav · 如何使用javascript从firebase中的键获取值

2 年前

Yeury De los Santos · 在firebase实时数据库android中恢复删除的子项

2 年前

Andromeda · Firebase云函数已完成,状态为“错误”

6 年前

Janith Warnamana · 从firebase数据库检索数据到getvalue中的listview null

6 年前