정의되지 않은 setState 및 사용자 인증 오류입니다. .bind (this)를 시도했습니다. 시도한 fatpipe ... 작동하지 않습니다

사실 두 가지 문제가 있습니다. 첫 번째는 사용자 확인과 함께 componentWillMount 또는 componentDidMount를 사용하면 현재 사용자를 확인하기 위해 firebase로 이동할 때 비동기식을 반환하고 사용자가 없으므로 if 문이 실행되지 않습니다. Promise로이 문제를 해결하려고했지만 Promise에 대한 이해가 좋지 않아서 포기하고 내부 코드로 작업하려고했습니다. 여러 번 실행되는 것처럼 보이는 componentWillUpdate로 Mount를 대체하여 오류를 강제로 우회하고 상태가 올바르게 변경되었는지 확인할 수 있습니다.

이것은 나를 두 번째 문제로 인도합니다. 내 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;

다음은 Promise에 대한 시도 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')
            }
        })

    })