如何解析JS Promise对象为变量并在React组件中跨文件使用？

核心问题拆解与修复方向 #

你当前的问题集中在三个点：

• 异步Promise数据无法直接对接React组件渲染逻辑
• 错误地在普通异步函数中使用useState违反React Hooks规则
• 跨组件复用异步数据的方式不正确

分步解决方案 #

1. 修复数据获取函数：剥离Hooks，保留纯异步逻辑 #

useState只能在函数组件或自定义Hook的顶层调用，不能放在普通工具函数里。先把数据获取逻辑还原成纯异步函数：

export async function GetRegionRidecounts(region) {
  try {
    const response = await fetch(`http://localhost:5000/get_region_ridecounts?region_name=${region}`, {
      method: 'GET',
      mode: 'cors',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    return await response.json();
  } catch (error) {
    return { "error": error.message };
  }
}

2. 正确实现折线图组件：用Hooks管理异步状态 #

在函数组件内部用useState存储数据、加载状态、错误信息，配合useEffect触发异步请求，同时加入数据运算逻辑：

import { useState, useEffect } from 'react';
import { LineChart } from '@cloudscape-design/components';
import { GetRegionRidecounts } from './your-api-file-path';

export default function RidersLineChart({ region }) {
  // 状态管理：数据、加载状态、错误信息
  const [chartData, setChartData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  // 组件挂载/region变化时触发数据获取
  useEffect(() => {
    const fetchAndProcessData = async () => {
      setIsLoading(true);
      const rawData = await GetRegionRidecounts(region);
      
      if (rawData.error) {
        setError(rawData.error);
      } else {
        // 在这里添加你的数学运算逻辑（示例：计算累计值）
        const processedData = calculateCumulativeCounts(rawData);
        setChartData(processedData);
      }
      setIsLoading(false);
    };

    fetchAndProcessData();
  }, [region]);

  // 数据运算示例：计算骑行次数累计值
  function calculateCumulativeCounts(rawData) {
    let total = 0;
    return rawData.map(item => {
      total += item.count;
      return {
        ...item,
        cumulativeCount: total
      };
    });
  }

  // 根据不同状态渲染对应内容
  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error}</div>;
  if (!chartData.length) return <div>暂无数据</div>;

  // 渲染Cloudscape折线图（修正你之前xDomain的笔误：data→date）
  return (
    <LineChart
      height={200}
      series={chartData}
      xDomain={[chartData[0].date, chartData[chartData.length - 1].date]}
      yDomain={[0, Math.max(...chartData.map(item => item.cumulativeCount))]}
      xScaleType="time"
      xTitle="时间（UTC）"
      yTitle="累计骑行次数"
      ariaLabel="区域骑行次数趋势"
      ariaDescription={`折线图展示${region}区域的累计骑行次数变化`}
    />
  );
}

3. 跨组件复用数据：用自定义Hook封装逻辑 #

如果需要在多个组件中使用同一份处理后的异步数据，封装成自定义Hook是最灵活的方式：

// useRegionRidecounts.js
import { useState, useEffect } from 'react';
import { GetRegionRidecounts } from './your-api-file-path';

export function useRegionRidecounts(region) {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      const result = await GetRegionRidecounts(region);
      if (result.error) {
        setError(result.error);
      } else {
        const processed = calculateCumulativeCounts(result); // 复用运算逻辑
        setData(processed);
      }
      setIsLoading(false);
    };

    fetchData();
  }, [region]);

  // 复用数据运算函数
  function calculateCumulativeCounts(rawData) {
    let total = 0;
    return rawData.map(item => {
      total += item.count;
      return { ...item, cumulativeCount: total };
    });
  }

  return { data, isLoading, error };
}

// 在其他组件中使用
import { useRegionRidecounts } from './useRegionRidecounts';

function RegionStats({ region }) {
  const { data, isLoading, error } = useRegionRidecounts(region);
  
  if (isLoading) return <div>加载中...</div>;
  return <div>{region}区域总骑行次数：{data[data.length - 1]?.cumulativeCount || 0}</div>;
}

关键规则提醒 #

• React组件不能直接返回异步操作结果，必须通过useState存储数据，useEffect触发请求
• Hooks只能在函数组件/自定义Hook的顶层调用，不能放在普通函数、循环、条件判断里
• 异步处理必须覆盖三种状态：加载中、加载完成、加载失败，避免空白或崩溃
• Cloudscape组件对数据格式有要求，确保处理后的数据符合组件参数规范

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