尝试设置 state 道具并将其传递到组件时“无法读取未定义的属性‘状态’”

Question

所以我有一个组件，我试图将一些 state 道具向下传递。 但由于某种原因，我收到错误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) => (

总是。

我在这里很困惑。

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

Answer 1

你使用this.setState({ data: allDeals }); 不在 class 的上下文中。 您的 window 事件 id 中的this指的是 function 它本身，而不是 window 而不是 Z9ED39E2EA93192EFA7B3AZ9.5EA93192EFA7B3A66 You must create the function in the class it self and pass it with arrow function syntax ()=>{} , so the context of this will be the main component, and not the window.