[英]React JS passing data from firebase into props for my component
class Mailbox extends Component {
componentDidMount() {
const db = firebase.firestore();
firebase.auth().onAuthStateChanged(function (user) {
if (user) {
var user = firebase.auth().currentUser.uid;
let cityRef = db.collection("Users").doc(user);
let getDoc = cityRef
.get()
.then((doc) => {
if (!doc.exists) {
console.log("No such document!");
} else {
console.log("Document data:", doc.data());
let data = doc.data();
console.log(data.EmailBody);
console.log(data.EmailSubject);
}
})
.catch((err) => {
console.log("Error getting document", err);
});
}
});
}
render() {
return (
<>
<div id="ZenTitle">
<h1>ZenMail Mailbox</h1>
</div>
<div id="MainArea" className="MainArea">
<Popup
trigger={
<button className="ComposeButton">
<i class="fas fa-pen-square" style={{ color: "white" }}></i>{" "}
Compose
</button>
}
position="center center"
contentStyle={{
backgroundColor: "#465775",
width: "98%",
height: "80%",
color: "white",
paddingTop: "25px",
borderRadius: "25px",
}}
arrowStyle={{
display: "none",
}}
>
<div>Compose New Email</div>
<br />
<NormEdit />
</Popup>
<Button className="RefreshButton">
<i style={{ color: "black" }} class="fas fa-sync"></i>
</Button>
<Button className="FavButton">
<i style={{ color: "black" }} class="fas fa-star"></i>
</Button>
<Button className="DeleteButton">
<i style={{ color: "black" }} class="fas fa-trash-alt"></i>
</Button>
<Form>
<FormGroup>
<Label></Label>
<Input className="EmailSearch" placeholder="Search Emails..." />
</FormGroup>
</Form>
<Popup
trigger={
<button className="SettingsButton">
<i style={{ color: "black" }} class="fas fa-cog"></i>
</button>
}
position="right center"
contentStyle={{
backgroundColor: "#465775",
width: "98%",
height: "80%",
color: "white",
paddingTop: "25px",
borderRadius: "25px",
}}
arrowStyle={{
display: "none",
}}
>
<div>Account Settings</div>
</Popup>
<Inbox />
<div className="IncomingArea">
<SingleEmail From="Testing" Subject="Testing" Date="testing" />
</div>
所以基本上我在這里要做的是我試圖通過我的
data.EmailBody
data.EmailSubject
從我的 componentDidMount 作為道具向下進入我的
<SingleEmail From="Testing" Subject="Testing" Date="testing" />
但我正在努力弄清楚如何做到這一點。 我嘗試的幾種方法似乎不起作用。 我對反應有些陌生,我嘗試使用 static 道具來做到這一點,但據我所知,這樣做似乎是不可能的。 我將不勝感激任何建議=]希望每個人都保持安全
獲取數據時使用state
並使用setState
設置 state 然后將其傳遞給組件。
像這樣:
class Mailbox extends Component {
state = {
data: {
EmailBody: '',
EmailSubject: '',
}
};
componentDidMount() {
const db = firebase.firestore();
firebase.auth().onAuthStateChanged(function (user) {
if (user) {
var user = firebase.auth().currentUser.uid;
let cityRef = db.collection("Users").doc(user);
let getDoc = cityRef
.get()
.then((doc) => {
if (!doc.exists) {
console.log("No such document!");
} else {
console.log("Document data:", doc.data());
let data = doc.data();
this.setState({
data,
})
console.log(data.EmailBody);
console.log(data.EmailSubject);
}
})
.catch((err) => {
console.log("Error getting document", err);
});
}
});
}
render() {
return (
<>
<div id="ZenTitle">
<h1>ZenMail Mailbox</h1>
</div>
<div id="MainArea" className="MainArea">
<Popup
trigger={
<button className="ComposeButton">
<i class="fas fa-pen-square" style={{ color: "white" }}></i>{" "}
Compose
</button>
}
position="center center"
contentStyle={{
backgroundColor: "#465775",
width: "98%",
height: "80%",
color: "white",
paddingTop: "25px",
borderRadius: "25px",
}}
arrowStyle={{
display: "none",
}}
>
<div>Compose New Email</div>
<br />
<NormEdit />
</Popup>
<Button className="RefreshButton">
<i style={{ color: "black" }} class="fas fa-sync"></i>
</Button>
<Button className="FavButton">
<i style={{ color: "black" }} class="fas fa-star"></i>
</Button>
<Button className="DeleteButton">
<i style={{ color: "black" }} class="fas fa-trash-alt"></i>
</Button>
<Form>
<FormGroup>
<Label></Label>
<Input className="EmailSearch" placeholder="Search Emails..." />
</FormGroup>
</Form>
<Popup
trigger={
<button className="SettingsButton">
<i style={{ color: "black" }} class="fas fa-cog"></i>
</button>
}
position="right center"
contentStyle={{
backgroundColor: "#465775",
width: "98%",
height: "80%",
color: "white",
paddingTop: "25px",
borderRadius: "25px",
}}
arrowStyle={{
display: "none",
}}
>
<div>Account Settings</div>
</Popup>
<Inbox />
<div className="IncomingArea">
<SingleEmail dataSubject={this.state.data.EmailSubject} dataEmail={this.state.data.EmailBody} From="Testing" Subject="Testing" Date="testing" />
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.