未定義ユーザー認証エラーのsetState。試してみた。試した脂肪パイプ...それを稼働させることはできません

Question

私は実際に2つの問題があります。まず、componentWillMountまたはcomponentDidMountを使用してユーザーをチェックすると、現在のユーザーを確認するためにfirebaseに行くので非同期に戻り、ifステートメントはユーザーがいないため実行されません。私はPromiseでこれを解決しようとしましたが、Promiseについての私の理解は良くないので、私はそれをあきらめて、内部コードで作業しようとしました。私は強制的にエラーをバイパスし、状態が正しく変更されているかどうかを確認できるように、複数回実行されるように、MountをcomponentWillUpdateに置き換えました。

これは私の第2の問題につながります。私のsetStateは定義されていません。私はStack Overflowを読んで、 ".bind（this）"とfatpipeを使用しようとしましたが、どちらも動作していません。おそらく私はそれを間違った場所に置いているか、構文が間違っています。誰でも助けることができますか？ここで

import React, { Component } from 'react'; 

import Search from './Search' 
import Recipe from './Recipe' 
import fire from '../fire' 
//import firebase from 'firebase' 

class Favourites extends Component { 

    constructor(props){ 
     super(props); 
     this.state = { 
      recipes: [] 
     } 
    } 

    componentDidUpdate() { 
     var user = fire.auth().currentUser; 

     if(user) { 
      console.log('Favorites: requesting favorites'); 
      fire.database().ref('/favourites/' + user.uid).once('value').then(function (snapshot) { 
       var recipes_obj = snapshot.val(); 
       let recipes = []; 
       for (let id in recipes_obj) { 
        let recipe = recipes_obj[id]; 
        recipe.id = id; 
        recipes.push(recipe); 
        console.log("recipes: ", recipes) 
       } 
       console.log("recipes outside", recipes); 
       this.setState({ recipes: recipes }); 
      }); 
     } else { 
      console.log('Favorites: no user') 
     } 
    } 

    render() { 

     return(
      <div> 


       <div className="wrapper"> 


        <div className="container"> 
         <div className="row"> 
          <div className="col s12"> 
           {console.log(this.recipes.bind(this))} 
           {/*{this.recipes.map(recipe => {*/} 
            {/*return (*/} 
             {/*<div key={recipe.id}>*/} 
              {/*{recipe.title}*/} 
             {/*</div>*/} 
            {/*)*/} 
           {/*})}*/} 
          </div> 
         </div> 
        </div> 

        <div className="container" id="search"> 
         <div className="row"> 
          <div className="col s12"> 
           <Recipe/> 
          </div> 
         </div> 
        </div> 
       </div> 

      </div> 

     ) 
    } 

} 

export default Favourites; 

プロミスのための試み2：

componentDidMount() { 
    var user = new Promise ((resolve, reject) => { 
     resolve(fire.auth().currentUser).then(() => { 
      if(user) { 
       console.log('Favorites: requesting favorites'); 
       fire.database().ref('/favourites/' + user.uid).once('value').then(function (snapshot) { 
        var recipes_obj = snapshot.val(); 
        let recipes = []; 
        for (let id in recipes_obj) { 
         let recipe = recipes_obj[id]; 
         recipe.id = id; 
         recipes.push(recipe); 
         console.log("recipes: ", recipes) 
        } 
        console.log("recipes outside", recipes); 
        this.setState({ recipes: recipes }); 
       }.bind(this)); 
      } else { 
       console.log('Favorites: no user') 
      } 
     }) 

    }) 

Answer 1

は、次のヘルプをしているのでしょうか？ （

  fire.database().ref('/favourites/' + user.uid).once('value').then(function (snapshot) { 
      var recipes_obj = snapshot.val(); 
      let recipes = []; 
      for (let id in recipes_obj) { 
       let recipe = recipes_obj[id]; 
       recipe.id = id; 
       recipes.push(recipe); 
       console.log("recipes: ", recipes) 
      } 
      console.log("recipes outside", recipes); 
      this.setState({ recipes: recipes }); 
     }.bind(this));