代码之家 › 专栏 › 技术社区 › 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);
        })
      }

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

3 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

4 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Luckkks · 过渡色工作不正常

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

4 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

4 月前

noblerare · Vite错误-未定义导出(SSR)

4 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

4 月前