React Native中map函数报错："Undefined" is not a function 求助

错误根源 #

你遇到的问题来自两个核心问题：

• 初始状态datas被设为字符串" "，字符串没有map()方法，直接调用必然报错。
• 你定义了异步请求函数但没触发它，导致数据根本没被获取，datas始终是初始的无效值。

修复步骤 #

1. 初始化正确的状态
   将useState的初始值改为空数组，这样即使数据还未加载，调用map()也不会报错：

   const [datas, setDatas] = useState([]);
   

2. 触发异步请求
   使用useEffect钩子在组件挂载时执行请求，确保数据能被正常获取：

   useEffect(() => {
     const fetchData = async () => {
       const response = await axios.get("http://hasanadiguzel.com.tr/api/kurgetir");
       setDatas(response.data.TCMB_AnlikKurBilgileri);
     };
     fetchData();
   }, []); // 空依赖数组确保请求只在组件挂载时执行一次
   

3. 可选：添加加载状态优化体验
   可以额外增加加载状态，避免数据未返回时页面空白：

   const [loading, setLoading] = useState(true);
   
   // 在请求函数中更新加载状态
   const fetchData = async () => {
     try {
       const response = await axios.get("http://hasanadiguzel.com.tr/api/kurgetir");
       setDatas(response.data.TCMB_AnlikKurBilgileri);
     } catch (err) {
       console.error("数据获取失败:", err);
     } finally {
       setLoading(false);
     }
   };
   

完整修复后的代码 #

import { useState, useEffect } from 'react';
import axios from 'axios';
import KurCard from './KurCard'; // 确保组件路径正确

const CurrencyComponent = () => {
  const [datas, setDatas] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get("http://hasanadiguzel.com.tr/api/kurgetir");
        setDatas(response.data.TCMB_AnlikKurBilgileri);
      } catch (err) {
        console.error("获取汇率数据失败:", err);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  if (loading) {
    return <div>加载汇率数据中...</div>;
  }

  return (
    <div>
      {datas.map((item) => (
        <KurCard
          key={item.CurrencyCode} // 必须添加唯一key，避免React渲染警告
          title={item.Isim}
          alis={item.BanknoteBuying}
          satis={item.BanknoteSelling}
        />
      ))}
    </div>
  );
};

export default CurrencyComponent;

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