Question

我有一个简单的功能，可以测试用户帐户上的标志，但是该功能内的return语句未在屏幕上呈现。控制台将读出2个GOT HERE，但是Notifications标头下没有任何内容。

我在网站的另一部分上实现了一个非常相似的功能，所以我对该功能如何无法按预期呈现感到困惑？

Dashboard.js：

import React, { Component } from 'react';
import fire from '../../config/Fire.js';
import { Link, withRouter } from 'react-router-dom';


class Dashboard extends Component {
    constructor(props) {
        super(props)
        this.checkFlags = this.checkFlags.bind(this);
      } 

    componentDidMount(){
    fire.auth().onAuthStateChanged( user => {
        if (user) {   
            //Grab user flags
            var userFlags = []
            fire.database().ref('/users/' + fire.auth().currentUser.uid + '/flags').once('value').then(function(snapshot) {
                snapshot.forEach(function(data) {
                    userFlags.push({ key: data.key , val: data.val() });
                });
            });

            this.setState({
                userFlags: userFlags
            })          
            }
        });
    }

checkFlags(){
        if(this.state.userFlags){
            this.state.userFlags.map((flag) => {
                if(flag.val === true){
                    if(flag.key === "unverifiedEmail"){
                        console.log("GOT HERE")
                        return(
                            <span>
                                <div>
                                    <div>
                                        <button 
                                            className="s-btn-inv"
                                            onClick={this.verifyEmail}>
                                            Send verification email</button>
                                    </div>
                                </div>
                            </span>
                        )
                    } else {
                        return(<span>Loading flags...</span>)
                    }   
                } else {
                    return(<span>No notifications at this time!</span>)     
                }
            })
        } else {
            return(<span>Loading notifications...</span>) 
        }
    }

render() {
        return (
            <div>
                <hr/>
                <h3>Notifications:</h3>
                { this.checkFlags() }
            </div>
          )
         }
}
export default withRouter(Dashboard);

Fire.js：

import firebase from 'firebase';
import 'firebase/database';
import 'firebase/storage';

const DB_CONFIG = {
    apiKey: "xxxxx",
    authDomain: "xxxx",
    databaseURL: "xxx",
    projectId: "xx",
    storageBucket: "xxx",
    messagingSenderId: "xxxx"
  };

const fire = firebase.initializeApp(DB_CONFIG);

const storage = firebase.storage()

export {
  storage, fire as default
}

Answer 1

您的map函数不返回任何内容。因此，您的checkFlags函数不会返回任何元素。在此处添加退货：

return this.state.userFlags.map((flag) => {

请注意，这将返回结果数组。因此，看到GOT HERE被记录两次，您的回报将是[<span/>, <span/>]

React函数未渲染

1 个答案: