由于某种原因，reactjs for loop在1处停止，并且在尝试在循环中使用set state时出现问题 类邮箱扩展组件{ 状态={ 数据：{ 电邮主题：“， 电子邮件日期：“， 电邮地址：“， }, }; componentDidMount（）{ const db=firebase.firestore（）； firebase.auth（）.onAuthStateChanged（（用户）=>{ 如果（用户）{ var user=firebase.auth（）.currentUser.uid； 让cityRef=db.collection（“用户”）.doc（用户）； 让getDoc=cityRef .get（） 。然后（（doc）=>{ 如果（！doc.存在）{ log（“没有这样的文档！”）； }否则{ log（“文档数据：”，doc.data（））； for（设z=0；z{ log（“获取文档时出错”，err）； }); } }); } render（）{ 返回(
因此，基本上我在这里尝试做的是在我的数据库中，我在诸如EmailBody[1]EmailBody[2]之类的数组下存储项目，等等，我需要从数据库获取并传递到setState，这样我就可以将它们作为道具传递到组件中。我尝试使用z作为变量设置这个for循环，然后让它循环添加z作为数组号，这样每个循环都会提取下一个信息数组并将其保存到状态。问题是循环似乎只运行0，1然后在循环开始后停止，因为我记录了z，这就是它停止的地方。所以我不确定为什么会发生这种情况，其次，我想知道是否因为我在循环并设置状态，如果每个循环都过度写入了以前保存的状态，而不是像我希望的那样向状态添加多个值，从而只导致一个值被忽略所以我希望得到一些建议。非常感谢=] 更新： 我加了这个由于某种原因，reactjs for loop在1处停止，并且在尝试在循环中使用set state时出现问题 类邮箱扩展组件{ 状态={ 数据：{ 电邮主题：“， 电子邮件日期：“， 电邮地址：“， }, }; componentDidMount（）{ const db=firebase.firestore（）； firebase.auth（）.onAuthStateChanged（（用户）=>{ 如果（用户）{ var user=firebase.auth（）.currentUser.uid； 让cityRef=db.collection（“用户”）.doc（用户）； 让getDoc=cityRef .get（） 。然后（（doc）=>{ 如果（！doc.存在）{ log（“没有这样的文档！”）； }否则{ log（“文档数据：”，doc.data（））； for（设z=0；z{ log（“获取文档时出错”，err）； }); } }); } render（）{ 返回(,reactjs,Reactjs,因此，基本上我在这里尝试做的是在我的数据库中，我在诸如EmailBody[1]EmailBody[2]之类的数组下存储项目，等等，我需要从数据库获取并传递到setState，这样我就可以将它们作为道具传递到组件中。我尝试使用z作为变量设置这个for循环，然后让它循环添加z作为数组号，这样每个循环都会提取下一个信息数组并将其保存到状态。问题是循环似乎只运行0，1然后在循环开始后停止，因为我记录了z，这就是它停止的地方。所以我不确定为什么会发生这种情况，其次，我想知道是否因为我在循环并设置状态，如果
class Mailbox extends Component {
state = {
data: {
emailSubject: "",
emailDate: "",
emailFrom: "",
},
};
componentDidMount() {
const db = firebase.firestore();
firebase.auth().onAuthStateChanged((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());
for (let z = 0; z < 10; z++) {
console.log(z);
let data = doc.data();
let emailBody = data.EmailBody[z];
let emailsubject = data.EmailSubject;
let emailSubject = emailsubject[z];
let oldDate = data.EmailDate[z].seconds;
var date = new Date(oldDate * 1000);
let NewDate = date.valueOf();
let emailDateYear = new Date(NewDate).getFullYear();
let emailDateMonth = new Date(NewDate).getMonth();
let emailDateDay = new Date(NewDate).getDate();
let emailFrom = data.EmailFrom[z].value[z].address;
console.log("FROMMMMM" + date);
let emailDate =
emailDateMonth + "/" + emailDateDay + "/" + emailDateYear;
this.setState({
emailSubject,
emailDate,
emailFrom,
});
console.log("STATE" + emailDate);
}
}
})
.catch((err) => {
console.log("Error getting document", err);
});
}
});
}
render() {
return (
<>
类邮箱扩展组件{
状态={
data:[，//一个空数组，它将被所有数据替换为一个
};
componentDidMount（）{
const db=firebase.firestore（）；
firebase.auth（）.onAuthStateChanged（（用户）=>{
如果（用户）{
var user=firebase.auth（）.currentUser.uid；
让cityRef=db.collection（“用户”）.doc（用户）；
让getDoc=cityRef
.get（）
。然后（（doc）=>{
如果（！doc.存在）{
log（“没有这样的文档！”）；
}否则{
log（“文档数据：”，doc.data（））；
让allEmails=[]；//下载电子邮件的数组
for（设z=0；z<100；z++）{
控制台日志（z）；
设data=doc.data（）；
让emailBody=data.emailBody[z]；
让emailSubject=data.emailSubject[z]；//添加了缺少的索引
让oldDate=data.EmailDate[z].秒；
var日期=新日期（旧日期*1000）；
设NewDate=date.valueOf（）；
让emailDateYear=新日期（NewDate）.getFullYear（）；
让emailDateMonth=新日期（NewDate）.getMonth（）；
让emailDateDay=NewDate（NewDate）.getDate（）；
让emailFrom=data.emailFrom[z]。值[z]。地址；
console.log（“frommmm”+日期）；
让我们约会吧=
emailDateMonth+“/”+emailDateDay+“/”+emailDateYear；
推({
//将当前电子邮件推送到阵列的末尾
电子邮件主题，
电邮日期：，
电邮：，
});
console.log（“状态”+emailDate）；
}
this.setState（{data:allEmails}）；//一次将所有电子邮件添加到该状态
}
})
.catch（（错误）=>{
log（“获取文档时出错”，err）；
});
}
});
}
render（）{
返回(
ZenMail邮箱
撰写新电子邮件
帐户设置
{this.state.data.map（（值，索引）=>(
))}
);
}
}
导出默认邮箱；
数据的索引。EmailSubject
class Mailbox extends Component {
state = {
data: [], // an empty array, that will be replaced by the one with all the data
};
componentDidMount() {
const db = firebase.firestore();
firebase.auth().onAuthStateChanged((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 allEmails = []; // array for the downloaded emails
for (let z = 0; z < 100; z++) {
console.log(z);
let data = doc.data();
let emailBody = data.EmailBody[z];
let emailSubject = data.EmailSubject[z]; // added the missing index
let oldDate = data.EmailDate[z].seconds;
var date = new Date(oldDate * 1000);
let NewDate = date.valueOf();
let emailDateYear = new Date(NewDate).getFullYear();
let emailDateMonth = new Date(NewDate).getMonth();
let emailDateDay = new Date(NewDate).getDate();
let emailFrom = data.EmailFrom[z].value[z].address;
console.log("FROMMMMM" + date);
let emailDate =
emailDateMonth + "/" + emailDateDay + "/" + emailDateYear;
allEmails.push({
// pushing the current email to the end of the array
emailSubject,
emailDate,
emailFrom,
});
console.log("STATE" + emailDate);
}
this.setState({ data: allEmails }); // adding all the emails to the state at once
}
})
.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">
{this.state.data.map((value, index) => (
<SingleEmail
Subject={value.emailSubject}
From={value.emailFrom}
Date={value.emailDate}
/>
))}
</div>
</div>
</>
);
}
}
export default Mailbox;
class Mailbox extends Component {
state = {
data: [] // an empty array, that will be replaced by the one with all the data
};
componentDidMount() {
const db = firebase.firestore();
firebase.auth().onAuthStateChanged((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 allEmails = []; // array for the downloaded emails
for (let z = 0; z < 10; z++) {
console.log(z);
let data = doc.data();
let emailBody = data.EmailBody[z];
let emailSubject = data.EmailSubject[z]; // added the missing index
let oldDate = data.EmailDate[z].seconds;
var date = new Date(oldDate * 1000);
let NewDate = date.valueOf();
let emailDateYear = new Date(NewDate).getFullYear();
let emailDateMonth = new Date(NewDate).getMonth();
let emailDateDay = new Date(NewDate).getDate();
let emailFrom = data.EmailFrom[z].value[z].address;
console.log("FROMMMMM" + date);
let emailDate =
emailDateMonth + "/" + emailDateDay + "/" + emailDateYear;
allEmails.push({ // pushing the current email to the end of the array
emailSubject,
emailDate,
emailFrom,
});
console.log("STATE" + emailDate);
}
setState({data: allEmails}); // adding all the emails to the state at once
}
})
.catch((err) => {
console.log("Error getting document", err);
});
}
});
}
// a simple map() to display the emails
render() {
return (
<>
{this.state.data.map((value, index) => (
<ul key={index}>
<li>{value.emailSubject}</li>
<li>{value.emailDate}</li>
<li>{value.emailFrom}</li>
<ul/>
))}
</>
)
}
}