React Native中如何将返回Promise的异步API请求结果传递给组件

问题原因 #

你当前的写法存在两处错误：

• 没有实际执行getData异步函数，直接把函数本身传给了cards属性
• 异步函数的返回值是Promise对象，无法直接作为数组类型的属性值传入组件，需要等待异步请求完成后拿到真实的数组数据

实现方案 #

基于React/React Native的函数组件，使用useState存储接口返回的数组数据，useEffect在组件挂载时触发异步请求：

首先你可以优化异步请求函数，原代码中循环拷贝数组的逻辑可以省略，接口返回的json本身就是数组可以直接返回：

const getData = async () => {
  const response = await fetch("URL");
  const data = await response.json();
  return data;
};

组件内的完整实现如下：

import { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
// 导入你的Swiper组件

const YourComponent = () => {
  // 声明状态存储卡片数组，初始为空数组
  const [cards, setCards] = useState([]);
  // 可选：声明加载状态、错误状态处理
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 组件挂载时触发异步请求
    const fetchCards = async () => {
      try {
        const res = await getData();
        setCards(res);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
    fetchCards();
  }, []); // 空依赖数组表示只在组件挂载时执行一次

  if (loading) return <Text>加载中...</Text>;
  if (error) return <Text>加载失败：{error}</Text>;

  return (
    <View style={styles.container}>
      <Swiper
        cards={cards} // 直接传入存储了接口数据的状态
        renderCard={(card) => {
          return (
            <View style={styles.card}>
              <Text style={styles.text}>{card}</Text>
            </View>
          );
        }}
      />
    </View>
  );
};

// 你的样式定义
const styles = StyleSheet.create({
  container: {},
  card: {},
  text: {}
});

export default YourComponent;

注意事项 #

• 如果你的Swiper组件不支持初始空数组，可在加载状态完成后再渲染Swiper组件
• 接口请求的URL请替换为你的实际接口地址
• 如果接口返回的数据结构不是纯数组，需要根据实际结构调整取值逻辑

内容的提问来源于stack exchange，提问作者isaac