开发者问题收集

尝试读取反应状态时,“无法读取 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