首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >React Native Deck Swiper

React Native Deck Swiper
EN

Stack Overflow用户
提问于 2021-01-07 11:22:41
回答 2查看 755关注 0票数 0

我正在尝试使用下面的两个功能组件向enpoint发出GET请求,以显示在我的react本机deck swipper中

代码语言:javascript
运行
复制
 //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);
};

从控制台记录时返回的数据:

代码语言:javascript
运行
复制
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",
  }....]

现在,我将数据保存到状态数组中

代码语言:javascript
运行
复制
const [getLatestNews, setLatestNews] = useState([]);

这是我的swipper(省略了一些代码--不是必须的)

代码语言:javascript
运行
复制
  <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.featured_image

我将得到这个错误- TypeError: undefined is not an object (evaluating 'card.featured_image')。有人能帮帮我吗。

代码语言:javascript
运行
复制
//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
EN

Stack Overflow用户

发布于 2021-01-16 12:47:49

在renderCard属性中,我将其从

代码语言:javascript
运行
复制
 renderCard={(card) => <Cardz card={card} />}

代码语言:javascript
运行
复制
 renderCard={(card) => (card && <Cardz card={card} />) || null}

而且它起作用了。

票数 0
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65606216

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档