如何在React组件中访问fetchapi函数内的allData变量？

你的核心问题是没有用React的状态管理存储接口数据——普通变量的变化不会触发组件重新渲染，而且函数内部的局部变量和外层变量完全是两个独立对象，所以外层根本拿不到接口返回的数据。下面是修正后的完整代码：

import { useState, Fragment } from 'react';
import axios from 'axios';

// 定义地址数据类型（TypeScript用，JS可省略）
type AddressData = {
  street_address: string;
  city: string;
  street_name: string;
  zipcode: string;
};

function AddressComponent() {
  const [loading, setLoading] = useState(false);
  // 用React状态存储地址数据，初始值为null
  const [addressData, setAddressData] = useState<AddressData | null>(null);

  const fetchapi = async () => {
    try {
      setLoading(true);
      // 简化异步写法，直接用await接收响应
      const response = await axios.get("https://random-data-api.com/api/v2/addresses");
      // 将接口数据存入状态，触发组件重新渲染
      setAddressData(response.data);
      setLoading(false);
    } catch (error) {
      setLoading(false);
      console.log(error);
    }
  };

  return (
    <Fragment>
      <div>
        <button onClick={fetchapi} disabled={loading}>
          {loading ? '加载中...' : 'Fetch Location'}
        </button>
        {/* 有地址数据时才展示卡片 */}
        {addressData && (
          <div
            style={{
              backgroundColor: "#c7c7c7",
              display: "flex",
              flexDirection: "column",
              padding: 16,
              margin: 5,
              borderRadius: 20
            }}
          >
            <p>
              <strong>Address: {addressData.street_address}</strong>
            </p>
            <p>
              <strong>City: {addressData.city}</strong>
            </p>
            <p>
              <strong>Street Name: {addressData.street_name}</strong>
            </p>
            <p>
              <strong>Zipcode: {addressData.zipcode}</strong>
            </p>
          </div>
        )}
      </div>
    </Fragment>
  );
}

export default AddressComponent;

关键修改说明： #

• 用useState管理数据：React组件只有状态变化时才会重新渲染，必须用useState定义addressData存储接口数据，这样更新数据后页面才会自动刷新展示内容。
• 消除变量作用域问题：你之前在fetchapi里重新声明了const allData，这和外层的let allData是两个独立变量，外层变量从未被赋值。现在直接把接口数据存入状态，整个组件都能访问。
• 优化异步逻辑：await和.then混用没必要，直接用await接收响应结果，代码更简洁易读。
• 完善交互体验：给按钮添加disabled属性，加载时禁用按钮并显示“加载中”，避免重复点击。

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