Javascript &引用；无法读取属性'；地图'；“未定义”的定义；当试图映射出状态并将其作为道具传递到组件时

因此，我将我的主要功能组件IndexHeaderHome，我试图设置allDeals的状态，然后将该状态作为道具传递到组件选项卡中。出于某种原因，虽然我得到了这个地图未定义的错误，但经过一点修补后，我无法找到解决方案，我希望有人能指出我的错误所在。非常感谢

function IndexHeaderHome() {
  const pageHeader = React.useRef();
  const [allDeals, setAllDeals] = React.useState();

  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);
      };
    }
    // no deps array makes it so the effect runs on every render
    // an empty one will run only on mount
  }, []);

  // Ive never used firebase, but I'm guessing you want
  // to initialize firestore only once and put it in a ref

  useEffect(() => {
    const getStuff = async () => {
      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 data = doc.data();
            let deals = JSON.parse(data);

            setAllDeals(deals);
          });
        })
        .catch((err) => {
          console.log("Error getting documents", err);
        });
    };
  }, []);

  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 />
          {allDeals.map(() => (
            <Tabs
              DealName={discountName}
              DealDisc={discountDesc}
              DealEnd={discountEdate}
              DealCat={discountDesc}
              DealDisp={discountDisp}
            />
          ))}
        </Container>
      </div>
    </>
  );
}
export default IndexHeaderHome;

---

通过使用

useState（）

只要检查一下就可以了

{allDeals ? allDeals.map(() => (
            <Tabs
              DealName={discountName}
              DealDisc={discountDesc}
              DealEnd={discountEdate}
              DealCat={discountDesc}
              DealDisp={discountDisp}
            />
          )):null}

{allDeals？allDeals.map（（）=>(
))：null}

---

备注：理想情况下，您可能希望在异步加载spinner或某种加载组件时呈现它

您可以使用

useState（）将
allDeals
默认设置为null
只要检查一下就可以了

{allDeals ? allDeals.map(() => (
            <Tabs
              DealName={discountName}
              DealDisc={discountDesc}
              DealEnd={discountEdate}
              DealCat={discountDesc}
              DealDisp={discountDisp}
            />
          )):null}

{allDeals？allDeals.map（（）=>(
))：null}

注意：理想情况下，在异步加载spinner或某种加载组件时，您可能希望呈现该组件
，您需要在该组件上添加空检查或初始状态

空检查示例

{allDeals && allDeals.map(() => ()}

初始状态

const [allDeals, setAllDeals] = React.useState([]);

{allDeals.length > 0 && allDeals.map(() => ()}

您将需要在其上添加空检查或初始状态

空检查示例

{allDeals && allDeals.map(() => ()}

初始状态

const [allDeals, setAllDeals] = React.useState([]);

{allDeals.length > 0 && allDeals.map(() => ()}