React中从async函数获取数据的问题求助

首先先纠正你service_query函数里的一个明显bug：循环里你一直往数组里塞features[0].attributes，这会导致所有元素都是第一个feature的属性，应该改成features[i].attributes：

export const service_query = async function(url){
  const resp = await fetch(url);
  const result = await resp.json();
  const features = result.features;
  const features_list = []
  for (let i = 0; i < features.length; i++){
    // 这里把features[0]改成features[i]
    features_list.push(features[i].attributes)
  }
  return features_list;
}

接下来解决React组件里异步数据的获取问题，你之前的核心问题是没利用React的状态管理来处理异步数据的变化，直接调用异步函数只会拿到Promise，而组件渲染是同步的，所以需要用useState保存数据，useEffect触发异步请求：

修正后的App组件代码 #

import './App.css';
import { useState, useEffect } from 'react';
import { service_query } from './Utils';
import Table from './Table';

function App() {
  const url = "[url goes here]";
  // 定义状态：保存数据、加载状态、错误信息
  const [dataValues, setDataValues] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 定义内部异步函数处理请求
    const fetchData = async () => {
      try {
        const data = await service_query(url);
        setDataValues(data);
      } catch (err) {
        setError('数据加载失败');
        console.error(err);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
    // 依赖数组：url变化时重新请求
  }, [url]);

  // 根据状态渲染不同内容
  if (isLoading) {
    return <div className="App">加载中...</div>;
  }

  if (error) {
    return <div className="App">{error}</div>;
  }

  // 确保数据存在再提取表头和内容
  const headers = dataValues.length > 0 ? Object.keys(dataValues[0]) : [];
  const content = dataValues.length > 0 ? dataValues : [];

  return (
    <div className="App">
      <header className="App-header">
        <h1>Test</h1>  
        <div className="container">
          <Table theadData={headers} tbodyData={content}/>
        </div>
      </header>
    </div> 
  );
}

export default App;

为什么这么写能解决问题？ #

• useState用来保存异步获取到的数据，当调用setDataValues时，React会重新渲染组件，此时就能拿到最新的真实数据，而不是Promise。
• useEffect是React用来处理副作用的钩子，这里用来发起异步请求，确保组件挂载后才请求数据，避免每次渲染都重复请求（依赖数组[url]保证只有url变化时才重新请求）。
• 加入加载和错误状态是为了提升用户体验，避免数据还没加载完成时出现dataValues[0]为undefined的报错。

你之前尝试的问题所在 #

1. 直接在组件函数里调用service_query(url)：组件渲染是同步的，此时异步请求还没完成，拿到的是Promise，自然无法访问data_values[0]。
2. 内部定义getData但没调用：就算调用了，直接返回的数据也无法同步更新到组件的渲染中，必须通过状态更新触发重新渲染。
3. 使用then但内部赋值变量：回调里的data_values是局部变量，外部根本访问不到，而且React也不知道这个变量变化了，不会重新渲染组件。

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