如何合并Axios返回数组为数据源并解决空数组问题传入Syncfusion SeriesDirective

核心问题在于你之前用普通变量存储数据源，组件重新渲染时变量会被重置，而React State能在组件生命周期中稳定保存状态，所以必须将datasource转为state管理，具体实现步骤如下：

1. 初始化数据源State #

在组件中通过useState初始化空数组作为数据源的初始状态：

import { useState, useEffect } from 'react';
import { SeriesDirective } from '@syncfusion/ej2-react-charts';
import axios from 'axios';

function YourChartComponent() {
  // 用state存储图表数据源
  const [datasource, setDatasource] = useState([]);

  // 后续逻辑写在这里
}

2. 在useEffect中获取并合并数据 #

将Axios请求放在useEffect钩子中，确保请求仅在组件挂载时执行一次（可按需添加依赖项），合并数据后通过setDatasource更新state：

useEffect(() => {
  const fetchAndMergeData = async () => {
    try {
      // 并行发起两个接口请求
      const [res1, res2] = await Promise.all([
        axios.get('/api/first-dataset'),
        axios.get('/api/second-dataset')
      ]);

      // 按要求格式合并两个数组
      const mergedData = [
        ...res1.data.map(item => ({ date: item.date, value: item.value })),
        ...res2.data.map(item => ({ date: item.date, value: item.value }))
      ];

      // 更新state，触发组件重新渲染
      setDatasource(mergedData);
    } catch (err) {
      console.error('数据获取失败:', err);
    }
  };

  fetchAndMergeData();
}, []); // 空依赖数组确保仅在组件挂载时执行一次

3. 将State传递给SeriesDirective #

直接把state中的datasource传入组件，state更新会自动触发组件重新渲染，保证图表始终拿到最新的有效数据：

return (
  <div>
    {/* 其他Syncfusion图表相关组件 */}
    <SeriesDirective dataSource={datasource} xName="date" yName="value" />
    {/* 其他Syncfusion图表相关组件 */}
  </div>
);

为什么普通变量会失效？ #

如果之前用let datasource = []这类普通变量存储数据，组件每次重新渲染（比如父组件更新、props变化）时，该变量会被重新初始化为空数组。这就是你看到console.log先显示填充后的数组（请求完成时），随后又变为空数组的原因——组件重新渲染重置了变量。而React State会在组件多次渲染间保留值，更新state时会触发组件重新渲染，确保图表始终获取到有效数据。

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