本文详解 react 中父子组件通信的规范做法，重点解决通过按钮触发 api 请求后将数据从 toolbarelement 传递至 graphelement 的常见错误，涵盖状态管理、props 传递、不可变性原则及 useeffect 协同更新等核心实践。
在 React 中，直接修改传入的 props 对象（如 state.graph_data = ...）是严格禁止的——这不仅违反 React 的不可变性原则，还会导致状态不同步、渲染异常甚至白屏（如你遇到的 Cannot set properties of undefined 错误）。根本原因在于：你传递给子组件的是一个普通 JavaScript 对象字面量 { graph_data: 0 }，它并非 React 状态（useState 或 useReducer 创建的响应式状态），不支持动态更新；且 state 在 ToolbarElement 中被解构为 const { state } = props 后，state 并未与 App 中的原始对象保持引用一致，data.lst[0] 此时也尚未赋值（data 是局部 state，异步获取前为空数组），导致 data.lst[0] 为 undefined，进而引发 TypeError。
✅ 正确方案：提升状态（Lifting State Up） + 受控组件模式
将共享数据 graph_data 的声明和更新逻辑统一收归至共同父组件 App，并通过 props 向下传递 当前值 和 更新函数：
✅ 修正后的代码结构
App.js（状态管理中心）
import React, { useState } from 'react';
function App() {
// ✅ 使用 useState 管理可响应式更新的状态
const [graphData, setGraphData] = useState(0);
return (
<div className="App">
<div className="App-body">
<div className="toolbar-element" style={{ top: "50px", left: "0px" }}>
{/* ✅ 传递当前值 + 更新函数 */}
<ToolbarElement graphData={graphData} setGraphData={setGraphData} />
</div>
<div className="graph-element" style={{ top: "50px", right: "0px" }}>
{/* ✅ 仅传递当前值（只读） */}
<GraphElement graphData={graphData} />
</div>
</div>
</div>
);
}
export default App;ToolbarElement.js（触发数据获取与更新）
import React, { useState } from 'react';
function ToolbarElement({ graphData, setGraphData }) {
const [loading, setLoading] = useState(false);
const handleButtonClick = async () => {
setLoading(true);
try {
const res = await fetch("/data");
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
// ✅ 通过父组件提供的 setter 安全更新状态
if (Array.isArray(data) && data.length > 0) {
setGraphData(data[0]); // ✅ 正确：触发 App 重渲染
} else {
setGraphData(null); // 或设默认值
}
} catch (err) {
console.error("Failed to fetch graph data:", err);
setGraphData(null);
} finally {
setLoading(false);
}
};
return (
<div style={{ height: '33.33%', backgroundColor: '#F0F0F0' }}>
<button onClick={handleButtonClick} disabled={loading}>
{loading ? 'Loading...' : 'Click me!'}
</button>
</div>
);
}
export default ToolbarElement;GraphElement.js（消费状态）
function GraphElement({ graphData }) {
// ✅ 安全渲染：处理可能的 null/undefined
return (
<div style={{ height: '33.33%', backgroundColor: '#E8E8E8' }}>
<p>{graphData !== null && graphData !== undefined
? String(graphData)
: 'No data available'}</p>
</div>
);
}
export default GraphElement;⚠️ 关键注意事项
- 不要修改 props：props 是只读的，任何直接赋值（如 props.graphData = x）或修改其属性均属反模式。
- 避免对象字面量传状态：{ graph_data: 0 } 是静态快照，无法响应式更新；必须用 useState / useReducer 创建可变状态。
- 异步操作需容错：API 返回可能为空、格式不符或失败，务必校验 data 类型与长度，再取 data[0]。
- 考虑加载与错误状态：实际项目中建议扩展 graphData 为 { value: ..., loading: boolean, error: string | null } 结构，提升用户体验。
- 进阶替代方案：若组件嵌套深或状态复杂，可选用 Context API 或状态管理库（如 Zustand、Jotai），但对本例而言，Lifting State Up 已是最简、最清晰的解法。
遵循以上实践，即可实现稳定、可维护、符合 React 哲学的跨组件数据流。
