如何在 React 中实现数据预加载以避免图表渲染空白-js教程-PHP中文网

如何在 React 中实现数据预加载以避免图表渲染空白

React 组件挂载后才会执行 componentDidMount，因此异步数据必然在首次渲染之后才可用；正确做法是保留生命周期逻辑，通过条件渲染（如 loading 状态）延迟图表展示，待数据就绪再渲染完整内容。

react 组件挂载后才会执行 `componentdidmount`，因此异步数据必然在首次渲染之后才可用；正确做法是保留生命周期逻辑，通过条件渲染（如 loading 状态）延迟图表展示，待数据就绪再渲染完整内容。

在 React 中，组件的首次渲染永远发生在 componentDidMount 之前——这是框架的设计约束，无法绕过。componentDidMount 是副作用（如 API 请求、订阅、DOM 操作）的标准入口，其异步特性决定了数据必然“后于初始 render 到达”。因此，“让数据在 render 前加载”在传统类组件中不可行；真正可落地的方案是：接受异步本质，用状态驱动 UI，实现优雅的数据等待体验。

关键改进点如下：

状态驱动渲染逻辑：将 rows 作为受控 state（而非全局 var rows = []），确保 React 能响应数据变化并触发重渲染；
添加加载态兜底：在 rows 为空时显示 Loading... 或骨架屏，避免空白或报错；
避免副作用污染：移除外部 rows 数组引用，改用 map 构建新数组并 setState，保证状态纯净与可预测性；
精简冗余逻辑：删除未使用的 key state 和 console.log，提升可维护性。

以下是优化后的完整实现：

react-best-practices

重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...

下载

import React from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { Chart } from 'react-google-charts';
import { loadAttivita } from '../../services/attivita';

const columns = [
  { type: 'string', label: 'Task ID' },
  { type: 'string', label: 'Task Name' },
  { type: 'string', label: 'Resource' },
  { type: 'date', label: 'Start Date' },
  { type: 'date', label: 'End Date' },
  { type: 'number', label: 'Duration' },
  { type: 'number', label: 'Percent Complete' },
  { type: 'string', label: 'Dependencies' },
];

export const options = {
  height: 400,
  gantt: {
    trackHeight: 30,
  },
};

class GaantView extends React.Component {
  state = {
    rows: [],
    isLoading: true, // 显式管理加载状态，更可控
  };

  async componentDidMount() {
    try {
      const valori = await loadAttivita();
      const rows = valori.map(({ Descrizione }) => [
        '2014Spring',
        Descrizione,
        'autumn',
        new Date(2014, 2, 22),
        new Date(2014, 5, 20),
        null,
        100,
        null,
      ]);
      this.setState({ rows, isLoading: false });
    } catch (error) {
      console.error('Failed to load activities:', error);
      this.setState({ isLoading: false });
      // 可选：展示错误提示 UI
    }
  }

  render() {
    const { rows, isLoading } = this.state;

    if (isLoading) {
      return <div style="{{" padding: color:>Caricamento diagramma Gantt...</div>;
    }

    if (rows.length === 0) {
      return <div style="{{" padding: color:>Nessuna attività disponibile.</div>;
    }

    return (
      <div>
        <p style="{{" color: textalign: margin:>
          Diagramma Gantt
        </p>
        <chart charttype="Gantt" width="100%" height="400px" data="{[columns," ...rows options="{options}"></chart>
</div>
    );
  }
}

const mapStateToProps = (state) => ({
  isFetching: state.auth.isFetching,
  isAuthenticated: state.auth.isAuthenticated,
  errorMessage: state.auth.errorMessage,
});

export default withRouter(connect(mapStateToProps)(GaantView));

✅ 注意事项与最佳实践：

不要在 render 中调用异步函数：这会破坏 React 渲染一致性，导致无限循环或竞态问题；所有数据获取必须置于生命周期或 useEffect（函数组件）中。
始终处理加载与错误状态：仅判断 rows.length 不够健壮，应配合 isLoading 和 error 状态提供完整用户体验。
避免直接修改全局变量：原代码中 var rows = [] 在模块顶层声明，被多个实例共享，极易引发状态污染——务必使用 this.state 管理组件专属数据。
现代替代建议：若项目已支持 Hooks，推荐迁移到 useState + useEffect，代码更简洁且易于测试。

通过以上重构，组件在视觉上实现了“数据就绪后才呈现图表”的效果，既符合 React 数据流规范，又保障了用户体验的连贯性与健壮性。