如何在JS Fetch API外部获取返回值？TS React+Ionic新手求助

嘿，作为刚接触TypeScript React和Ionic的新手，遇到异步数据获取的问题太正常啦！我来帮你拆解下问题出在哪，以及正确的做法：

为什么你的代码拿不到数据？ #

首先要明确：fetch是异步操作，它返回的是一个Promise，你的前几种写法都有小问题：

• 第一个写法里，getData函数没有返回fetch整个Promise链，所以let data = getData()拿到的是默认的undefined
• 第二个async写法里，你在fetch的then里返回了数据，但没有把整个fetch的Promise返回出去，导致getData().then(...)拿不到值

React+Ionic中正确的异步数据处理方式 #

在React组件里，我们需要用状态（useState）来存储异步获取的数据，用useEffect来触发数据请求（避免组件重复渲染时重复请求），再结合async/await让代码更清晰：

完整示例代码（TypeScript） #

import { useState, useEffect } from 'react';
import { IonCard, IonCardTitle, IonContent } from '@ionic/react';

// 先定义数据的类型（TypeScript必备）
interface Movie {
  title: string;
  // 根据你的API返回数据补充其他字段
}

const MovieList = () => {
  // 定义状态存储电影数据、加载状态、错误信息
  const [movies, setMovies] = useState<Movie[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // 封装数据获取函数
  const fetchMovies = async () => {
    try {
      setIsLoading(true);
      const response = await fetch('你的API地址');
      // 检查请求是否成功
      if (!response.ok) {
        throw new Error(`请求失败：${response.status}`);
      }
      const data_from_fetched = await response.json();
      // 把数据存到状态里
      setMovies(data_from_fetched.results);
      setError(null);
    } catch (err) {
      setError(err instanceof Error ? err.message : '未知错误');
      setMovies([]);
    } finally {
      setIsLoading(false);
    }
  };

  // 组件挂载时触发数据请求
  useEffect(() => {
    fetchMovies();
  }, []);

  // 渲染逻辑
  if (isLoading) {
    return <IonContent><p>加载中...</p></IonContent>;
  }

  if (error) {
    return <IonContent><p>出错了：{error}</p></IonContent>;
  }

  return (
    <IonContent>
      {movies.length === 0 ? (
        <p>没有找到电影数据</p>
      ) : (
        movies.map((movie, index) => (
          <IonCard key={index}> {/* 注意要加唯一的key */}
            <IonCardTitle>{movie.title}</IonCardTitle>
            {/* 可以添加更多电影信息 */}
          </IonCard>
        ))
      )}
    </IonContent>
  );
};

export default MovieList;

关键要点解释 #

1. 用useState存储数据：React组件只有状态变化时才会重新渲染，所以异步获取的数据必须存在状态里，才能在DOM中渲染出来
2. useEffect触发请求：把数据请求放在useEffect里，依赖项传空数组[]，确保只在组件挂载时请求一次
3. async/await的正确用法：用try/catch处理请求错误，比嵌套then更易读，也能捕获网络错误或API返回的错误
4. 渲染时的边界处理：一定要处理加载中、错误、空数据的情况，避免movies.map时因为movies是undefined或空数组报错
5. TypeScript类型定义：给数据定义接口，能获得更好的代码提示和类型检查

纠正你之前的渲染错误 #

你之前的渲染代码{movies.map(movie => movie){ let title = <IonCardTitle>{movie.title}</IonCardTitle>}}有两个问题：

• 箭头函数的语法错误，应该是movies.map(movie => { return <IonCardTitle>{movie.title}</IonCardTitle> })
• 没有给每个列表项加唯一的key属性，React需要这个来优化渲染性能

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