使用axios发起HTTP请求出现Promise拒绝，运行10-30秒后报错

问题根源 #

你直接在组件函数体内调用了res()方法，组件每次渲染都会执行这个函数，而函数中的setDatas会触发组件重新渲染——这就形成了无限重渲染循环，随着渲染次数持续累积，最终触发了报错。

解决步骤 #

使用React的useEffect钩子，将API请求逻辑包裹进去，并设置空依赖数组，确保请求只在组件挂载时执行一次：

修改后的代码 #

import { useState, useEffect } from 'react';
import axios from 'axios';
import SafeAreaView from 'react-native-safe-area-view';
import View from 'react-native';
import KurCard from './KurCard';

const App = () => { 
  const [datas, setDatas] = useState([]); 

  const fetchData = async () => { 
    try {
      const response = await axios.get("http://hasanadiguzel.com.tr/api/kurgetir");
      setDatas(response.data.TCMB_AnlikKurBilgileri || []);
    } catch (error) {
      console.error('获取汇率数据失败:', error);
      // 可在此添加错误提示逻辑
    }
  }; 

  useEffect(() => {
    fetchData();
  }, []); // 空依赖数组：仅在组件挂载时执行一次

  return ( 
    <SafeAreaView style={style.container}> 
      <View> 
        {datas.map((item, index) => { 
          return ( 
            <KurCard 
              key={index} // 添加key属性，避免React渲染警告
              title={item.Isim} 
              alis={item.BanknoteBuying} 
              satis={item.BanknoteSelling} 
            /> 
          ); 
        })} 
      </View> 
    </SafeAreaView> 
  ); 
};

额外优化点 #

1. 添加key属性：在map循环的子组件上添加key，帮助React识别列表元素变化，避免不必要的渲染警告。
2. 错误处理：用try/catch包裹请求逻辑，捕获并处理网络请求失败的情况，提升应用稳定性。
3. 空值兜底：设置response.data.TCMB_AnlikKurBilgileri || []，避免接口返回数据异常导致datas变为非数组类型，进而引发map报错。

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