Reactjs 反应式甲板滑水器

我正在尝试使用下面的两个功能组件向enpoint发出GET请求，以显示在我的react native deck 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（有一些代码不需要）

---

我以前也做过类似的事情，所以我想我能帮点忙。这里的问题是，在卡片呈现之前，您的

getLatestNews

状态尚未更新。您可以通过让另一个名为“isDataReturned”的状态来修复此问题。然后，有一个

useffect

，每当

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>)
    }

const[getLatestNews，setLatestNews]=useState（[]）；
const[dataIsReturned，setDataIsReturned]=useState（false）
useffect（（）=>{
const fetchData=async（）=>{
常量结果=等待axios(
'https://cat-fact.herokuapp.com/facts',
);
setLatestNews（result.data）；
};
fetchData（）；
}, []);
useffect（（）=>{
如果（getLatestNews.length>0）{
setDataIsReturned（真）
}否则{
setDataIsReturned（错误）
}
}，[getLatestNews.length]）
如果（dataIsReturned==真）{
返回(
{
返回(
{card.text}
)
}}
onswaped={（cardIndex）=>{console.log（cardIndex）}
onswipdall={（）=>{console.log（'onswipdall'）}
cardIndex={0}
背景颜色={'#4FD0E9'}
stackSize={3}>
)
}否则{
退货（装货）
}

在renderCard属性中，我将其从

 renderCard={(card) => <Cardz card={card} />}

renderCard={（卡片）=>}

到

renderCard={（卡片）=>（卡片&&）| |空}

---

它成功了。

@sagar shakya请你帮我一把我按你说的做了我的状态

const[isDataReturned，setisDataReturned]=useState（false）在我的useEffect中：
useEffect（（）=>{GetDataUsingAsyncWaitGetCall（）；//bhb（）；showUnreadNewsNotif（）；if（getLatestNews.length>0）{setisDataReturned（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={(card) => <Cardz card={card} />}

 renderCard={(card) => (card && <Cardz card={card} />) || null}