React Native中如何跨文件调用async函数？解决代码运行报错问题

问题分析 #

你的代码存在两个核心问题：

1. 在组件函数体内直接执行自执行异步函数，会导致组件每次渲染都重复调用async函数，引发无限循环或不必要的请求。
2. React Native中没有Web端的<a>标签，使用它会导致组件渲染错误。

修正后的完整代码 #

1. 后端文件（index.js）

确保resultado变量已通过异步逻辑正确赋值：

// index.js
export async function main() {
  // 替换为你的实际异步数据获取逻辑
  const resultado = await Promise.resolve(['数据项1', '数据项2', '数据项3']);
  return resultado.join("\n");
}

2. 主组件文件（App.js）

使用useEffect钩子控制异步函数执行时机，替换错误的<a>标签：

// App.js
import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';

import { main } from './Backend/index'; 

export default function App() {
  const [someVal, setSomeVal] = useState('加载中...');

  // 仅在组件首次挂载时执行异步调用
  useEffect(() => {
    const fetchData = async () => {
      try {
        const awaitedVal = await main();
        setSomeVal(awaitedVal);
      } catch (error) {
        // 处理异步请求错误
        setSomeVal('数据加载失败');
        console.error(error);
      }
    };

    fetchData();
  }, []); // 空依赖数组确保逻辑只执行一次

  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        {someVal}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

关键修正点 #

• 用useEffect替代直接执行异步函数：空依赖数组[]保证异步逻辑只在组件首次挂载时运行，避免重复渲染。
• 移除<a>标签：React Native中使用Text组件展示文本，若需跳转功能，可结合Linking组件实现。
• 添加错误捕获：用try/catch处理异步请求可能出现的错误，提升应用稳定性。

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