javascript - 尝试设置状态道具并将其传递给组件时“无法读取未定义的属性'状态'”

问题描述

所以我有一个组件，我试图将一些状态道具传递给它。但是由于某种原因，我收到了错误Cannot read property 'state' of undefined，但是当我记录我正在推动的每件事时，一切都回来了，结果没有任何东西回来未定义。


/*eslint-disable*/
import React from "react";
import FilterNow from "../../views/index-sections/filter";
import * as firebase from "firebase";

// reactstrap components
import {
  Card,
  CardHeader,
  CardBody,
  NavItem,
  NavLink,
  Nav,
  TabContent,
  TabPane,
  Row,
  Col,
} from "reactstrap";

import Tabs from "views/index-sections/Tabs";

// reactstrap components
import { Container } from "reactstrap";

window.addEventListener("load", function load(event) {
  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 deal = doc.data();

        let discountName = deal.liveDiscountName;
        let discountDesc = deal.liveDiscountDescription;
        let discountCat = deal.liveDiscountCategory;
        let discountDisp = deal.liveDiscountDispensary;
        let discountEdate = deal.liveDiscountEndDate;
        console.log("RUNNING");

        allDeals.push({

          discountName,
          discountDesc,
          discountCat,
          discountDisp,
          discountEdate,
        });
        this.setState({ data: allDeals }); 
      });
    })
    .catch((err) => {
      console.log("Error getting documents", err);
    });
});

// core components

function IndexHeaderHome() {
  let pageHeader = React.createRef();

  React.useEffect(() => {
    if (window.innerWidth > 991) {
      const updateScroll = () => {
        let windowScrollTop = window.pageYOffset / 3;
        pageHeader.current.style.transform =
          "translate3d(0," + windowScrollTop + "px,0)";
      };
      window.addEventListener("scroll", updateScroll);
      return function cleanup() {
        window.removeEventListener("scroll", updateScroll);
      };
    }
  });
  const [iconPills, setIconPills] = React.useState("1");
  const [pills, setPills] = React.useState("1");
  return (
    <>
      <div className="page-header clear-filter" filter-color="blue">
        <div
          className="page-header-image"
          style={{
            backgroundImage: "url(" + require("assets/img/header.jpg") + ")",
          }}
          ref={pageHeader}
        ></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}
              DealDisc={value.discountDesc}
              DealEnd={value.discountEdate}
              DealCat={value.discountDesc}
              DealDisp={value.discountDisp}
            />
          ))}
        </Container>
      </div>
    </>
  );
}

export default IndexHeaderHome;

它说错误是：

第105章

在那条线上很奇怪。如果我删除该组件，它只是说错误现在在 Container> 大声笑上，所以它抛出了上面的错误


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

总是。

我在这里很困惑。

如果有人对这可能是什么有任何想法，那将是惊人的，感谢您的帮助=]

标签： javascriptreactjs

javascript - 尝试设置状态道具并将其传递给组件时“无法读取未定义的属性'状态'”

问题描述

解决方案

推荐阅读