データが読み込み中に表示されない - ページの更新後にのみ

Question

私はReact JSを初めて使いました。私はいくつかのチュートリアルを手がかりにしていました。

次のコードは、コメントが現在閉じられているチュートリアルから取得されたもので、問題を解決しようとしています。

Firebaseのデータは表示されず、リストにアイテムを追加することもできません。Firebaseに追加されているデータは表示されますが、ユーザーには何も表示されません。ページをリロードすると、すべて正常に動作します。

これは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; 

は、その後、私は持っているfirebase.jsです：

import firebase from 'firebase' 

var config = { 
    apiKey: "xxxxxxxxxxxx", 
    authDomain: "xxxxxxxxxxxx.firebaseapp.com", 
    databaseURL: "https://xxxxxxxxxxxx.firebaseio.com", 
    projectId: "xxxxxxxxxxxx", 
    storageBucket: "xxxxxxxxxxxx.appspot.com", 
    messagingSenderId: "xxxxxxxxxxxx" 
}; 

firebase.initializeApp(config); 

export const provider = new firebase.auth.GoogleAuthProvider(); 
export const auth = firebase.auth(); 

export default firebase; 

私はこの問題はhttps://css-tricks.com/firebase-react-part-2-user-authentication/で見ることができ、元のチュートリアル、中に存在することをかなり確信しています。

ご協力いただければ幸いです。

おかげで、

ジョン。

Answer 1

多分ちょうど別の関数に出て、あなたのfirebaseコールを引き出し、そしてユーザーが？：あなたは `でなければならないのは何

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

}