如何在获取信息对js作出反应之前使用map函数
如何在获取信息对js作出反应之前使用map函数
提问于 2020-05-03 01:45:55
我正在用这个结构做一个主页
const Login: React.FC = () => {
[ ... ]
return (
<IonPage>
<IonContent>
<IonSlides pager={false} options={slideOpts}>
{
responseProducts.content.products.map(function(item,i) {
return <IonSlide key={i} >
<IonCard onClick={Product}>
<IonImg src={item.urlImg}></IonImg>
<IonCardHeader>
<IonCardSubtitle>{item.ref}</IonCardSubtitle>
<IonCardTitle>{item.title}</IonCardTitle>
</IonCardHeader>
</IonCard>
</IonSlide>
})
}
</IonSlides>
</IonContent>
</IonPage>
);
};当我获取服务器api时，变量responseProducts.content.products是一个产品数组。
我试图在应用程序启动之前获取api来初始化变量：
const Login: React.FC = () => {
/* this is the initialization of my variable with products*/
let responseProducts : getProductsReponse;
/* function to fetch the api*/
useIonViewDidEnter(async () => {
await fetchProducts();
});
const fetchProducts = async() =>{
await ProductService.getProducts()
.then((products ) =>{
responseProducts = products.data;
})
}
return (
<IonPage>
<IonContent>
<IonSlides pager={false} options={slideOpts}>
{
responseProducts.content.products.map(function(item,i) {
return <IonSlide key={i} >
<IonCard onClick={Product}>
<IonImg src={item.urlImg}></IonImg>
<IonCardHeader>
<IonCardSubtitle>{item.ref}</IonCardSubtitle>
<IonCardTitle>{item.title}</IonCardTitle>
</IonCardHeader>
</IonCard>
</IonSlide>
})
}
</IonSlides>
</IonContent>
</IonPage>
);
};但我用我的产品犯了这个错误：
Variable 'responseProducts' is used before being assignedStack Overflow用户
回答已采纳
发布于 2020-05-03 02:05:09
编辑:要在等待数据时显示不同的内容，您可以这样做：
if (!responseProducts) return <Loader />;
else
return (
<IonPage>
...
</IonPage>
);但是在这里，您需要触发组件的呈现。要么将产品置于状态并使用setState，要么在父服务器中处理获取，并将产品作为propr传递(仍然需要状态)。
您需要responseProducts的默认值。您可以使用useEffect钩子和useState钩子来实现这一点：
const Login: React.FC = () => {
const [products, setProducts] = useState({});
const [didMount, setDidMount] = useState(false);
useEffect(() => {
if(!didMount){
// I don't know where this comes from so i'll use it like this, adapt if needed
useIonViewDidEnter(async () => {
await fetchProducts();
});
} else {
!didMount && setDidMount(true);
}
});
/* this is the initialization of my variable with products*/
let responseProducts: getProductsReponse;
/* function to fetch the api*/
const fetchProducts = async () => {
await ProductService.getProducts().then((products) => {
// responseProducts = products.data;
const data: getProductsReponse = products.data;
setProducts(data);
});
};
// You could even put a different return (a loader for exemple) while your data arent available
return (
<IonPage>
<IonContent>
<IonSlides pager={false} options={slideOpts}>
{/* this is now strange, you can adapt what you put in your state */}
{products.content.products.map((item, i) => {
return (
<IonSlide key={i}>
<IonCard onClick={Product}>
<IonImg src={item.urlImg}></IonImg>
<IonCardHeader>
<IonCardSubtitle>{item.ref}</IonCardSubtitle>
<IonCardTitle>{item.title}</IonCardTitle>
</IonCardHeader>
</IonCard>
</IonSlide>
);
})}
</IonSlides>
</IonContent>
</IonPage>
);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61568631
复制相关文章
相似问题
腾讯云开发者
