Question

所以我试图设置状态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）;

我得到“对象对象”作为响应。

错误本身是在这里引用此行

 {this.state.data.map((value, index) => (

这些都记录了它们应该记录的值


  discountName,
            discountDesc,
            discountCat,
            discountDisp,
            discountEnd,

如果有人知道我在这里做错了什么，可以帮助我，我将不胜感激=]

Answer 1

您必须在forEach循环之后设置一次setState，而且还需要在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;

尝试读取反应状态时“无法读取null的属性'data'”

1 个答案: