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