尝试读取反应状态时,“无法读取 null 的属性‘数据’”
2020-04-12
473
因此,我尝试设置状态 allDeals 并将其作为道具发送到我的组件 Tabs。
class IndexHeaderHome extends Component {
componentDidMount() {
const db = firebase.firestore();
let citiesRef = db.collection("Live_Deals");
let query = citiesRef
.where("liveDiscountActive", "==", true)
.get()
.then((snapshot) => {
if (snapshot.empty) {
console.log("No matching documents.");
return;
}
snapshot.forEach((doc) => {
console.log(doc.id, "=>", doc.data());
let allDeals = [];
let data = doc.data();
let discountName = data.liveDiscountName;
let discountDesc = data.liveDiscountDescription;
let discountDisp = data.liveDiscountDispensary;
let discountCat = data.liveDiscountCategory;
let discountEnd = data.liveDiscountEndDate;
allDeals.push({
// pushing the current email to the end of the array
discountName,
discountDesc,
discountCat,
discountDisp,
discountEnd,
});
console.log("all deaaaals" + allDeals);
this.setState({ data: allDeals }); // adding all the emails to the state at once
});
})
.catch((err) => {
console.log("Error getting documents", err);
});
}
render() {
return (
<div className="page-header clear-filter" filter-color="blue">
<div
className="page-header-image"
style={{
backgroundImage: "url(" + require("assets/img/header.jpg") + ")",
}}
></div>
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />{" "}
<br /> <br /> <br />
<Container>
<div className="content-center brand">
<h1 className="h1-seo">Get updates on the latest deals!</h1>
<h3>Save money everyday with our live deal updates!</h3>
</div>
</Container>
<Container>
<FilterNow />
{this.state.data.map((value, index) => (
<Tabs
DealName={value.discountName}
DealDesc={value.discountDesc}
DealDisp={value.discountDisp}
DealCat={value.discountCat}
DealEnd={value.discountEnd}
/>
))}
</Container>
</div>
);
}
}
export default IndexHeaderHome;
但问题是我在帖子标题中收到了错误。
当我记录 console.log("all deaaaals" + allDeals);
我得到“object object”作为响应。
错误本身指的是此处的这一行
{this.state.data.map((value, index) => (
并且这些都记录了它们应该记录的值
discountName,
discountDesc,
discountCat,
discountDisp,
discountEnd,
如果有人知道我在这里做错了什么并且可以帮助我,我将不胜感激 =]
1个回答
您必须在 forEach 循环后设置一次 State,此外,您向其中推送数据的数组需要在 for 循环之外初始化。此外,由于您尚未在构造函数中初始化状态,因此在初始渲染后更新 setState 时会收到错误
class IndexHeaderHome extends Component {
state = {
data: []
}
componentDidMount() {
const db = firebase.firestore();
let citiesRef = db.collection("Live_Deals");
let query = citiesRef
.where("liveDiscountActive", "==", true)
.get()
.then((snapshot) => {
if (snapshot.empty) {
console.log("No matching documents.");
return;
}
let allDeals = [];
snapshot.forEach((doc) => {
console.log(doc.id, "=>", doc.data());
let data = doc.data();
let discountName = data.liveDiscountName;
let discountDesc = data.liveDiscountDescription;
let discountDisp = data.liveDiscountDispensary;
let discountCat = data.liveDiscountCategory;
let discountEnd = data.liveDiscountEndDate;
allDeals.push({
// pushing the current email to the end of the array
discountName,
discountDesc,
discountCat,
discountDisp,
discountEnd,
});
});
console.log("all deaaaals" + allDeals);
this.setState({ data: allDeals }); // adding all the emails to the state at once
})
.catch((err) => {
console.log("Error getting documents", err);
});
}
render() {
return (
<div className="page-header clear-filter" filter-color="blue">
<div
className="page-header-image"
style={{
backgroundImage: "url(" + require("assets/img/header.jpg") + ")",
}}
></div>
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />{" "}
<br /> <br /> <br />
<Container>
<div className="content-center brand">
<h1 className="h1-seo">Get updates on the latest deals!</h1>
<h3>Save money everyday with our live deal updates!</h3>
</div>
</Container>
<Container>
<FilterNow />
{this.state.data.map((value, index) => (
<Tabs
DealName={value.discountName}
DealDesc={value.discountDesc}
DealDisp={value.discountDisp}
DealCat={value.discountCat}
DealEnd={value.discountEnd}
/>
))}
</Container>
</div>
);
}
}
export default IndexHeaderHome;
Shubham Khatri
2020-04-12