如何从React组件的axios异步请求中获取返回的对象数据

• axios.get是异步请求，你写在组件顶层的请求会在组件初始化时触发，但then回调要等接口返回数据后才会执行，此时组件的return语句已经提前执行完成，自然读取不到回调里的response值。同时response是then回调的局部变量，作用域本身就无法覆盖到回调外层。
• 你已经引入了useState但并未使用，React函数组件需要将动态渲染的数据存储在响应式state中，修改state才会触发组件重新渲染，更新视图上的内容。
• 直接在组件顶层发送请求会导致组件每次重渲染都重复发起API调用，既浪费性能又会消耗接口请求额度，需要用useEffect控制请求的触发时机。

import React, {useState, useEffect} from 'react'
import {Text, View} from 'react-native'
const axios = require('axios');

let HomeScreen =() => {
  // 定义state存储接口返回的天气数据
  const [weatherData, setWeatherData] = useState(null)
  // 定义加载状态避免渲染报错
  const [loading, setLoading] = useState(true)
  let key = "XXXX"

  // 用useEffect包裹请求，空依赖数组代表仅组件首次挂载后发起一次请求
  useEffect(() => {
    axios.get(`https://api.weatherapi.com/v1/current.json?key=${key}&q=London&aqi=no`)
    .then(function (response) {
      // 请求成功后把数据存入state
      setWeatherData(response.data)
      setLoading(false)
    })
    .catch(err => {
      // 可在这里补充自定义错误处理逻辑
      console.log('请求失败', err)
      setLoading(false)
    })
  }, [])

  // 加载中显示占位内容
  if(loading) {
    return <Text>加载中...</Text>
  }

  // 数据返回后渲染对应内容，可根据接口实际返回结构调整取数字段
  return(
    <View>
      <Text>当前城市：{weatherData?.location?.name}</Text>
      <Text>当前温度：{weatherData?.current?.temp_c}℃</Text>
    </View>
  )
}

export default HomeScreen

• 新增useEffect包裹API请求逻辑，空依赖数组保证请求仅在组件首次挂载时触发一次
• 新增weatherData响应式state存储接口返回结果，请求成功后调用setWeatherData更新state，会自动触发组件重新渲染
• 新增加载状态判断，避免接口请求还没完成时读取不存在的字段导致报错
• 渲染时使用可选链操作符?.读取字段，进一步避免字段不存在时的运行报错

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