尝试将 map 输出 state 并将其作为道具传递给组件时，“无法读取未定义的属性‘映射’”

Question

所以我有我的主要功能组件IndexHeaderHome，我正在尝试设置state allDeals，然后将state作为道具传递到组件选项卡中。 出于某种原因，我收到了这个 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

默认情况下，您使用useState()将allDeals设置为 null ，只需 null 检查它就可以了；

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

PS：理想情况下，您可能希望在异步加载时渲染微调器或某种加载组件

Answer 2

您需要在其上添加 null 检查或初始 state。

null 检查示例

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

带初始 State

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

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