React Native：如何将Axios请求响应数据传入组件返回UI？

你的代码存在几个关键问题，比如函数组件误用类组件的状态写法、请求未受控导致重复触发、无法直接访问异步回调里的变量，以下是修正后的完整实现方案：

import React, { useState, useEffect } from 'react';
import { View, Text, Alert } from 'react-native';
import axios from 'axios';

const AboutScreen = ({ route }) => {
  const { name } = route.params;
  // 用useState定义状态存储请求结果，初始值为空字符串
  const [responseData, setResponseData] = useState('');
  // 其他需要保留的状态，统一用useState单独声明
  const [text, setText] = useState('');
  const [stored1Value, setStored1Value] = useState('');
  const [storedValue, setStoredValue] = useState('');
  const [store1Value, setStore1Value] = useState('');
  const [storeValueU, setStoreValueU] = useState('');
  const [storeValueUU, setStoreValueUU] = useState('');
  const [storeValueUUU, setStoreValueUUU] = useState('');
  const [storeValueUUUU, setStoreValueUUUU] = useState('');
  const [storeValueUUUUU, setStoreValueUUUUU] = useState('');

  useEffect(() => {
    // 封装请求逻辑，用async/await简化异步代码
    const fetchData = async () => {
      try {
        const response = await axios.get(`https://cookiebytes.ca/google-login-php/Jacob.php?name=${name}`);
        Alert.alert('请求结果', response.data);
        // 将请求到的数据存入状态，触发组件重新渲染
        setResponseData(response.data);
      } catch (error) {
        console.error('请求失败:', error);
      }
    };

    fetchData();
  }, [name]); // 依赖name参数，仅当name变化时重新发起请求

  return (
    <View>
      {/* 渲染状态中存储的请求结果 */}
      <Text>AboutScreen {responseData}</Text>
    </View>
  );
};

export default AboutScreen;

关键改动说明： #

1. 替换状态管理方式：函数组件不能使用类组件的state = {...}语法，改用useState Hook单独声明每个状态变量，符合React函数组件的规范。
2. 受控的异步请求：将Axios请求放在useEffect中，依赖项设置为[name]，确保仅在组件挂载或name参数变化时发起请求，避免重复触发。
3. 状态更新与渲染联动：请求成功后调用setResponseData更新状态，React会自动触发组件重新渲染，此时Text组件就能拿到最新的请求数据。
4. 简化异步代码：用async/await替代.then/.catch写法，代码结构更清晰，错误处理更直观。

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