如何解决React Native Deck Swiper
我正在尝试使用下面的两个功能组件向端点发出 GET 请求,以显示在我的 React Native 甲板 swipper 中
//using fetch
const getDataUsingFetch = () => {
fetch(latestNews+ApiKey)
.then((response) => response.json())
.then((responseJson) => {
// set the state of the output here
console.log(responseJson);
setLatestNews(responseJson);
})
.catch((error) => {
console.error(error);
});
}
//using anxios
//asynchronous get request call to fetech latest news
const getDataUsingAnxios = async () => {
//show loading
setLoading(true);
setTimeout(async () => {
//hide loading after the data has been fetched
setLoading(false);
try {
const response = await axios.get(latestNews+ApiKey);
setLatestNews(response.data);
setLoading(false);
console.log(getLatestNews);
} catch (error) {
// handle error
alert(error.message);
}
},5000);
};
从控制台记录时返回的数据:
Array [
Object {
"category_id": "8","content": "Hi","created_at": "2020-11-12T12:43:03.000000Z","featured_image": "splash-background_1605184983.jpg","id": 19,"news_url": "doerlife.com","title": "I m good how about you","updated_at": "2020-11-12T12:43:03.000000Z",}....]
我现在将数据保存到状态数组中
const [getLatestNews,setLatestNews] = useState([]);
这是我的 swipper(省略了一些代码 - 没有必要)
<Swiper
ref={useSwiper}
//cards={categoryID(docs,"2")}
cards={getLatestNews}
cardindex={0}
backgroundColor="transparent"
stackSize={2}
showSecondCard
cardHorizontalMargin={0}
animateCardOpacity
disableBottomSwipe
renderCard={(card) => <Card card={card} />}
.....
当我尝试从我的 Card 可重用组件访问数组中的任何数据时,例如 card.featured_image
我会得到这个错误 - TypeError: undefined is not an object (evaluating 'card.featured_image')
。
请有人帮助我。
//Card reusable component for deck swipper
import React from 'react'
import { View,Text,Image,ImageSourcePropType } from 'react-native'
import styles from './Card.styles'
const Card = ({ card }) => (
<View activeOpacity={1} style={styles.card}>
<Image
style={styles.image}
source={card.featured_image}
resizeMode="cover"
/>
<View style={styles.photoDescriptionContainer}>
<Text style={styles.title}>{`${card.title}`}</Text>
<Text style={styles.content}>{`${card.content}`}</Text>
<Text style={styles.details}>
Swipe Left to read news in details
</Text>
</View>
</View>
);
export default Card
解决方法
我以前做过类似的事情,所以我想我可以提供一些帮助。这里的问题是您的 getLatestNews
状态在卡片呈现之前尚未更新。您可以通过另一种称为“isDataReturned”的状态来解决该问题。然后,有一个 useEffect
会在 getLatestNews
的长度发生变化时触发。如果 getLatestNews
的长度 > 0,那么您可以将 isDataReturned
设置为 true 并仅在 isDataReturned
为 true 时才渲染甲板。
这是我制作的代码示例:
const [getLatestNews,setLatestNews] = useState([]);
const [dataIsReturned,setDataIsReturned] = useState(false)
useEffect(() => {
const fetchData = async () => {
const result = await axios(
'https://cat-fact.herokuapp.com/facts',);
setLatestNews(result.data);
};
fetchData();
},[]);
useEffect(() => {
if (getLatestNews.length > 0) {
setDataIsReturned(true)
} else {
setDataIsReturned(false)
}
},[getLatestNews.length])
if( dataIsReturned === true) {
return (
<View style={styles.container}>
<Swiper
cards={getLatestNews}
renderCard={(card) => {
return (
<View style={styles.card}>
<Text>{card.text}</Text>
</View>
)
}}
onSwiped={(cardIndex) => {console.log(cardIndex)}}
onSwipedAll={() => {console.log('onSwipedAll')}}
cardIndex={0}
backgroundColor={'#4FD0E9'}
stackSize= {3}>
</Swiper>
</View>)
} else {
return(<Text>Loading</Text>)
}
,
在renderCard属性中,我从
renderCard={(card) => <Cardz card={card} />}
到
renderCard={(card) => (card && <Cardz card={card} />) || null}
它奏效了。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。