React 组件挂载后才会执行 componentDidMount，因此异步数据必然在首次渲染之后才可用；正确做法是保留生命周期逻辑，通过条件渲染（如 loading 状态）延迟图表展示，待数据就绪再渲染完整内容。
react 组件挂载后才会执行 `componentdidmount`，因此异步数据必然在首次渲染之后才可用；正确做法是保留生命周期逻辑，通过条件渲染（如 loading 状态）延迟图表展示，待数据就绪再渲染完整内容。
在 React 中，组件的首次渲染永远发生在 componentDidMount 之前——这是框架的设计约束，无法绕过。componentDidMount 是副作用（如 API 请求、订阅、DOM 操作）的标准入口，其异步特性决定了数据必然“后于初始 render 到达”。因此，“让数据在 render 前加载”在传统类组件中不可行；真正可落地的方案是：接受异步本质，用状态驱动 UI，实现优雅的数据等待体验。
关键改进点如下：
-
状态驱动渲染逻辑：将
rows作为受控 state（而非全局var rows = []），确保 React 能响应数据变化并触发重渲染； -
添加加载态兜底：在
rows为空时显示Loading...或骨架屏，避免空白或报错； -
避免副作用污染：移除外部
rows数组引用，改用map构建新数组并setState，保证状态纯净与可预测性； -
精简冗余逻辑：删除未使用的
keystate 和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: '20px', color: '#666' }}>Caricamento diagramma Gantt...</div>;
}
if (rows.length === 0) {
return <div style={{ padding: '20px', color: '#999' }}>Nessuna attività disponibile.</div>;
}
return (
<div>
<p style={{ color: 'white', textAlign: 'center', margin: '10px 0' }}>
Diagramma Gantt
</p>
<Chart
chartType="Gantt"
width="100%"
height="400px"
data={[columns, ...rows]}
options={options}
/>
</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 数据流规范，又保障了用户体验的连贯性与健壮性。
