javascript - 反应功能不渲染
问题描述
我有一个简单的函数来测试用户帐户上的标志,但是函数内的返回语句没有呈现在屏幕上。控制台将读出 2GOT HERE
秒,但通知标题下没有任何内容。
我在网站的另一部分实现了一个非常相似的功能,所以我对这个功能如何没有按预期呈现有点困惑?
仪表板.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
}
解决方案
您的map
函数不返回任何内容。checkFlags
因此,您的函数不会返回任何元素。在此处添加返回:
return this.state.userFlags.map((flag) => {
请注意,这会返回一个结果数组。所以看到GOT HERE
被记录了两次,你的回报将是[<span/>, <span/>]
推荐阅读
- go - 如何在 Go 程序中将字符串评估为 Go 代码?
- python - 如何反向打印一个单词,一个字母一个字母。示例“现在最好的歌曲是什么”>“won thgir gnos tseb eht si tahW
- hyperlink - 在 WKWebView 中打开外部链接(不是外部)
- javascript - Rails 控制器生成控制器错误
- sql - 使用 sp_MSForEachTable 删除所有数据而不填满事务日志
- java - 如何让 JFrame “等待”?
- fortran - IEEE_UNDERFLOW_FLAG 是否暂停了我的 fortran 代码?
- android - Gradle复制任务不复制文件
- spring - Spring Boot:Repository 接口 sql 注入保护
- javascript - 使用一个索引作为键对多个数组求和