Question

实际上我有两个问题。首先，使用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')
            }
        })

    })

Answer 1

是否提供以下帮助？（将此绑定到promise中的函数）

Dealer's Roll: 
1 6 3 
Your Roll: 
4 2 5

setState of Undefined＆amp;用户验证错误。试过。绑定（这个）。试过胖子......不能让它起作用

1 个答案: