set未定义状态和用户身份验证错误。尝试了.bind(这个)。试过胖管...无法让它工作

Question

我实际上有两个问题。 第一件事是，使用 componentWillMount 或 componentDidMount 对用户进行检查将返回异步，因为它会转到 firebase 检查当前用户，并且 if 语句不会运行，因为没有用户。 我试图用 Promise 来解决这个问题，但也许我对 Promise 的理解并不好，所以我放弃了它，并尝试使用内部代码。 我用组件WillUpdate替换了挂载，因为它似乎运行了多次，以便我可以强制绕过错误并检查状态是否正确更改。

这就引出了我的第二个问题。 我的设置状态说未定义。 我已经阅读了堆栈溢出并尝试使用".bind(this("和胖管，但两者都不起作用。 也许我把它放在错误的地方，或者我的语法是错误的。 有人可以帮忙吗？

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));