Javascript &引用；无法读取属性'；州'；“未定义”的定义；尝试设置状态道具并将其传递到组件时

所以我有一个组件，我正试图把一些国家的支柱传给它。但是由于某种原因，我得到了一个错误

无法读取未定义的属性“state”

，但是当我记录我正在推动的每一件事情时，所有的事情都会返回，结果没有任何东西是未定义的

/*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;

总是

我在这里很困惑

---

如果有人对它可能是什么有任何想法，那将是令人惊奇的，谢谢你的帮助=]

你使用了

this.setState（{data:allDeals}）不在类的上下文中。窗口事件id中的
此
指向其自身的函数，而不是窗口和状态。您必须在类中自己创建函数，并使用arrow函数语法传递它，因此该函数的上下文将是主组件，而不是窗口不在类的上下文中。窗口事件id中的
此
指向其自身的函数，而不是窗口和状态。你必须在类中自己创建函数，并用arrow函数语法传递它，这样它的上下文将是主组件，而不是窗口。
没有地方让函数组件使用
this.state
只是查找它显然我需要使用“useState”只是不确定在这种情况下如何使用
this.state
没有功能组件的位置，只是查找了一下，显然我需要使用“useState”，只是不确定在这种情况下我如何在主函数中添加所有代码，并将其从onload侦听器中删除，现在我相信我需要使用“useState”而不是“this.setState”内部功能部件，对吗？对。您必须初始化数据的useState并从那里呈现它。如前所述，FuncComponenet中没有放置此

的位置。我在主函数中添加了所有代码，并将其从onload侦听器中删除，现在我认为我需要在功能组件中使用“useState”而不是“this.setState”，对吗？是的。您必须初始化数据的useState并从那里呈现它。如前所述，在FuncComponenet中没有放置此

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