data.map 不是一个函数 react redux答案

【问题标题】：data.map is not a funcion react reduxdata.map 不是一个函数 react redux
【发布时间】：2021-07-18 18:17:27
【问题描述】：

大家好，我的问题如下，当我移动到另一个视图并返回上一个视图时，我正在使用 redux 并出于某种原因做出反应，我收到此错误 data.map 不是函数，这是我的主要组件我试图通过验证数组中是否有带有“？”的东西来解决它。但它仍然不起作用，我在主路径中添加了一个验证，但它仍然不起作用。

const HomeScreen = () => {
  useEffect(() => {
    responsiveMobile();
  });

  return (
<>
  <Banner id="BannerHome">
    <img src="/assets/images/Banner.png" alt="" />
  </Banner>

  <ListAdopt>
    <SubTitle className="space m-0" style={{ textAlign: "center" }}>
      ¿Quieres Adoptar?
    </SubTitle>
    <div className="content-swiper">
      <ContainerTwo>
        <SwiperAdopt />
        <ButtonTarjet>
          <Link to="/">
            VER TODOS
          </Link>
        </ButtonTarjet>
      </ContainerTwo>
    </div>
  </ListAdopt>

  <ListNotAdopt className="adopt">
    <SubTitle className="space m-0" style={{ textAlign: "center" }}>
      Animales adoptados recientemente
    </SubTitle>
    <AdoptAnimal>
      <ContainerTwo>
        <SwiperNotAdopt />
        <ButtonTarjet>
          <Link to="/">
            VER TODOS
          </Link>
        </ButtonTarjet>
      </ContainerTwo>
    </AdoptAnimal>
  </ListNotAdopt>

  <ListAdopt className="p-0">
    <div className="container-fluid">
      <div className="row">
        <LeftContent className="col-6">
          <ContainerLeft>
            <Campanias />
          </ContainerLeft>
        </LeftContent>
        <BackgroundCampania className="col-6">
          <img src="/assets/images/bannerDos.png" alt="banner" />
        </BackgroundCampania>
      </div>
    </div>
  </ListAdopt>
  <ModalLogin />
</>

); };

这是验证

useEffect(() => {
    dispatch(loadAnimals());
    firebase.auth().onAuthStateChanged((user) => {
      if (user?.uid) {
        dispatch(login(user.uid, user.displayName, user.email));
        setLog(true);
      }
    }); 
    setTimeout(() => {
      setLoad(true);
    }, 1500);
  }, [dispatch]);  

    if (!load) {
    return <h1>Espere...</h1>;
  }

这是收到错误的组件

const SwiperAdopt = () => {
  const { data } = useSelector((state) => state.load);

  return (
    <Swiper
      spaceBetween={0}
      autoplay={{
        delay: 3000,
      }}
      pagination={{ clickable: true }}
      breakpoints={{
        600:{
          slidesPerView: 1
        },
        650:{
          slidesPerView: 2
        },
        1000:{
          slidesPerView: 3
        }
      }}
    >
      {data?.map((animal) => {
        if (!animal.adopt) {
          return (
            <SwiperSlide key={animal.id} className="height-swiperTwo">
              <HeaderAdopt
                style={{ backgroundImage: `url(${animal.image})` }}
              ></HeaderAdopt>
              <BodyAdopt className="py-4">
                <ContainerBody>
                  <TitletBody className="pb-2">{animal.title}</TitletBody>
                  <Paragraph style={{ textAlign: "center" }}>
                    {animal.description}
                  </Paragraph>
                  <ButtonTarjet>
                    <Link to={`/details/${animal.id}`}>CONOCER MÁS</Link>
                  </ButtonTarjet>
                </ContainerBody>
              </BodyAdopt>
            </SwiperSlide>
          );
        }
        return false;
      })}
    </Swiper>
  );
};

【问题讨论】：

导航后数据似乎更新到某个对象，确保负载减少器中的data必须是一个数组，

标签： javascript reactjs dictionary redux components

【解决方案1】：

请尽量不要在使用 useSelector 时破坏数据，而是像这样使用它：

const data = useSelector((state) => state.load);

然后代替

data?.map((animal) =>

使用

data?.data?.map((animal) =>

【讨论】：