Javascript 数据在加载时不显示-仅在页面刷新后显示

我是React JS的新手，我一直在学习一些教程来了解它

下面的代码取自一个教程，其中的注释现在已关闭，我正试图解决这个问题

当我运行应用程序时，Firebase中的数据不会显示，我也无法将项目添加到列表中-虽然我可以在Firebase中看到添加的数据，但用户似乎没有发生任何事情。如果我重新加载页面，一切正常

我猜这与componentDidMount有关，据我所知，componentDidMount只在第一次加载页面时调用，因此如果用户未登录，数据也不会加载，甚至在用户登录后也不会加载-是这样吗

有谁能在用户登录后立即帮我加载数据，而不需要刷新页面

 import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
import firebase, { auth, provider } from './firebase.js';

class App extends Component {
  constructor() {
    super();
    this.state = {
      currentItem: '',
      username: '',
      datetime: '',
      items: [],
      user: null,
      profileImg: ''
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
  }
  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }
  login() {
      auth.signInWithPopup(provider)
          .then((result) => {
              const user = result.user;
              this.setState({
                  user
              });
          });

  }
  logout() {
      auth.signOut()
          .then(() => {
              this.setState({
                  user: null
              });
          });
  }
  handleSubmit(e) {
    e.preventDefault();
    const itemsRef = firebase.database().ref('items');
    const item = {
        title: this.state.currentItem,
        user: this.state.user.displayName || this.state.user.email,
        profileImg: this.state.user.photoURL
    }
    itemsRef.push(item);
    this.setState({
      currentItem: '',
      username: '',
      profileImg: this.state.user.photoURL
    });
  }
  componentDidMount() {

    const itemsRef = firebase.database().ref('items');

    itemsRef.on('value', (snapshot) => {
      let items = snapshot.val();
      let newState = [];
      for (let item in items) {
        newState.push({
          id: item,
          title: items[item].title,
          user: items[item].user,
          profileImg: items[item].profileImg
        });
      }
      this.setState({
        items: newState
      });
    });

    auth.onAuthStateChanged((user) => {
        if (user) {
            this.setState({ user });
        }
    });
  }

  removeItem(itemId) {
    const itemRef = firebase.database().ref(`/items/${itemId}`);
    itemRef.remove();
  }
  render() {
      return (
          <div className='app'>
            <header>
              <div className="wrapper">
                <h1></h1>
                  {this.state.user ?
                      <button onClick={this.logout}>Logout</button>
                      :
                      <button onClick={this.login}>Log In</button>
                  }
              </div>
            </header>

              {this.state.user ?
                  <div>
                    <div className='user-profile'>
                      <img src={this.state.user.photoURL} alt={this.state.user.displayName} />
                    </div>
                    <div className='container'>
                        <section className='display-item'>
                            <div className="wrapper">
                                <ul>
                                    {this.state.items.reverse().map((item) => {
                                        return (
                                            <li key={item.id}>
                                                <h3>{item.title}</h3>
                                                <p>brought by: {item.user}
                                                    {item.user === this.state.user.displayName || item.user === this.state.user.email ?
                                                        <button onClick={() => this.removeItem(item.id)}>Remove Item</button> : null}

                                                    <img src={item.profileImg} alt={this.state.user.displayName} className={"profileImg"} />

                                                </p>
                                            </li>
                                        )
                                    })}
                                </ul>
                            </div>
                        </section>
                      <section className='add-item'>
                        <form onSubmit={this.handleSubmit}>
                          <input type="text" name="username" placeholder="What's your name?" onChange={this.handleChange} value={this.state.user.displayName || this.state.user.email} disabled />
                          <input type="text" name="currentItem" placeholder="What are you bringing?" onChange={this.handleChange} value={this.state.currentItem} />
                          <button>Add Item</button>
                        </form>
                      </section>
                    </div>
                    </div>
                  :
                  <div className='wrapper'>
                    <p>You must be logged in to see this page.</p>
                  </div>
              }

          </div>

      );
  }
}

export default App;

我相当肯定这个问题存在于原始教程中，可以在网站上查看

任何帮助都将不胜感激

谢谢

---

John。

也许只需将firebase调用拉到一个单独的函数中，并在用户登录后调用它即可：

login() {
  auth.signInWithPopup(provider)
      .then((result) => {
          this.callFirebaseFunction()
          const user = result.user;
          this.setState({
              user
          });
      });

---

}

也许只需将您的firebase调用拉到一个单独的函数中，并在用户登录后调用它即可：

login() {
  auth.signInWithPopup(provider)
      .then((result) => {
          this.callFirebaseFunction()
          const user = result.user;
          this.setState({
              user
          });
      });

---

}你在

/firabe.js中有什么？你能发布它吗？我已经添加了它，谢谢。你在
/firabe.js
中有什么？你能发表一下吗？我已经加进去了，谢谢。