本文详解 react 中父子组件间状态共享的正确方式，重点解决因直接修改 props 导致的 `cannot set properties of undefined` 错误，并提供基于 react 状态提升（lifting state up）的标准实践方案。
在 React 应用中，子组件之间不能直接通信——它们必须通过共同的父组件（如 App.js）协调数据流。你当前代码中的核心问题在于：试图在 ToolbarElement 中直接赋值 state.graph_data = ...，但 state 是作为普通对象传入 props 的，既非 React state，也未被声明为可响应式变量，因此该操作不仅无效，还会因 data.lst 尚未完成异步加载而引发 undefined 异常（data.lst[0] 报错），最终导致白屏。
✅ 正确做法：状态提升 + 回调函数
应将共享状态（graph_data）提升至父组件 App 中管理，并通过 useState 声明；再将更新状态的函数（如 setGraphData）作为 prop 传递给 ToolbarElement，由其在 API 请求成功后调用；GraphElement 则直接接收最新状态值。
以下是重构后的完整实现：
✅ App.js
import React, { useState } from 'react';
import ToolbarElement from './ToolbarElement';
import GraphElement from './GraphElement';
function App() {
// ✅ 使用 useState 管理可响应式状态
const [graphData, setGraphData] = useState(null); // 初始值设为 null 更安全
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();
// ✅ 安全取值：确保数组非空
if (Array.isArray(data) && data.length > 0) {
setGraphData(data[0]); // ✅ 触发父组件状态更新
} else {
setGraphData(null);
console.warn('API returned empty or invalid data');
}
} 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
? JSON.stringify(graphData)
: 'No data loaded yet'}</p>
</div>
);
}
export default GraphElement;⚠️ 关键注意事项
- 禁止直接修改 props 对象：React 中 props 是只读的，任何对其属性的赋值（如 props.state.x = y）均属反模式，且不会触发重渲染。
- 避免“伪状态对象”：像 const state = { graph_data: 0 } 这样的普通对象不具备响应性，无法驱动 UI 更新。
- 异步逻辑需错误处理：fetch 必须配合 try/catch 或 .catch()，并校验 res.ok 和数据结构，防止运行时崩溃。
- 空值防御必不可少：在访问 data[0] 前务必检查 Array.isArray(data) && data.length > 0，否则极易触发 TypeError。
- 使用 JSON.stringify() 渲染复杂对象：若 graph_data 是对象或数组，直接 {graphData} 可能报错，建议格式化显示。
✅ 总结
React 的数据流是自上而下、单向不可变的。跨组件通信的黄金法则始终是：将共享状态提升至最近共同祖先，通过 props 向下传递状态值，通过回调函数向上通知变更。这一模式不仅解决当前白屏问题，更保障了应用的可维护性与可预测性。
