javascript - "Cannot read property ' 尝试映射状态并将其作为 props 传递到组件时映射 ' of undefined"

Question

所以我有我的主要功能组件 IndexHeaderHome 并且我尝试设置状态 allDeals，然后将该状态作为 props 传递到组件 Tabs 中。由于某种原因，我收到了此 map 未定义的错误，经过一番修补后我无法找到解决方案，我希望有人能指出我哪里出错了。非常感谢=]

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;

错误就在这行

          {allDeals.map(() => (

Answer 1

您需要添加空检查或初始状态。

空值检查示例

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

初始状态

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

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