data.map不是函数反应还原

Question

大家好，我的问题如下，当我移动到另一个视图并返回到上一个视图时，由于某种原因，我正在使用redux并做出反应。我得到了这个错误数据。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>
);
};

Answer 1

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

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

然后代替

data?.map((animal) => 

使用

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