Daten werden nicht beim Laden angezeigt - nur nach der Seitenaktualisierung.

Question

Ich bin neu in React JS, und ich habe einige Tutorials durchgearbeitet, um mich damit vertraut zu machen.

Der folgende Code stammt aus einem Tutorial, in dem Kommentare jetzt geschlossen sind, und ich versuche, ein Problem damit zu lösen.

Wenn ich die App ausführen, werden die Daten von Firebase nicht angezeigt, und ich kann auch keine Elemente zur Liste hinzufügen - für den Benutzer scheint nichts zu passieren, obwohl ich die Daten in Firebase hinzugefügt sehen kann. Wenn ich die Seite neu lade, funktioniert alles einwandfrei.

Ich vermute, das ist etwas mit componentDidMount zu tun, das, wie ich verstehe, nur beim ersten Laden der Seite aufgerufen wird. Wenn der Benutzer also nicht eingeloggt ist, werden die Daten nicht geladen und gewonnen. t sein, auch nachdem sich der Benutzer anmeldet - ist das richtig?

Könnte jemand mir helfen, die Daten zu laden, sobald sich der Benutzer anmeldet, anstatt eine Aktualisierung der Seite zu erfordern?

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; 

Dann ist firebase.js ich habe:

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; 

Ich bin ziemlich sicher, dass dieses Thema in den ursprünglichen Tutorial vorhanden ist, die bei https://css-tricks.com/firebase-react-part-2-user-authentication/ betrachtet werden können.

Jede Hilfe würde sehr geschätzt werden.

Danke,

John.

Answer 1

Vielleicht ist Ihr Feuerbasis Anruf gerade herausziehen in eine separate Funktion, und es nennen, nachdem der Benutzer in ?:

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

}