將 promise 傳遞給組件 React Native

Question

我正在用 API 調用填充我的數據數組，就像這樣

 const getData = async () => {
    const response = await fetch(
      "URL"
    );
    var data = await response.json();
    let arr = [];
    for (let i = 0; i < data.length; i++) {
      arr.push(data[i]);
    }
    return arr;
  };

我如何將它傳遞給反應本機組件，它是 promise？

return(
 <View style={styles.container}>
      <Swiper
        cards={  getData } //Here
        renderCard={(card) => {
          return (
            <View style={styles.card}>
              <Text style={styles.text}>{card}</Text>
            </View>
          );
        }}
       
      </Swiper>
);

Answer 1

將 fetch function 放在父組件的useEffect中，並使arr成為 state 變量

const [arr, setArr] = useState([])
useEffect(()=>{
  const getData = async () => {
      const response = await fetch(
        "URL"
      );
      var data = await response.json();
      setArr(data)
  }
  getData();
},[])
return (
 <View style={styles.container}>
      <Swiper
        cards={arr} //Here
        renderCard={(card) => {
          return (
            <View style={styles.card}>
              <Text style={styles.text}>{card}</Text>
            </View>
          );
        }}
      </Swiper>
  </View>)