本文详解如何在 react 应用中安全、高效地在多个组件（如 toolbarelement 和 graphelement）之间共享和更新状态，重点纠正直接修改 state 对象导致的 “read-only” 错误，并提供符合 react 最佳实践的状态管理方案。
在 React 中，组件间共享数据的核心原则是 “状态提升（Lifting State Up）”：将需要被多个子组件读写的状态定义在它们最近的共同父组件中（如 App），再通过 props 向下传递状态值与更新函数。但实践中常见误区是试图直接修改从父组件传入的 state 对象——这不仅违反 React 的不可变性原则，还会触发运行时错误（如 TypeError: "activeState" is read-only），因为 useState 返回的 state 是只读引用。
✅ 正确做法：使用函数式更新 + 展开语法维护状态完整性
首先，在 App 组件中正确定义初始状态，并移除重复声明：
function App() {
// ✅ 正确：使用 useState 初始化对象状态，移除冗余的 activeState = { ... } 声明
const [activeState, setActiveState] = useState({
graph_data: 0,
other_data: 1,
});
return (
<div className="App">
<div className="App-body">
<div className="toolbar-element" style={{ top: "50px", left: "0px" }}>
{/* ✅ 精简传递：仅需传入状态更新函数 */}
<ToolbarElement setActiveState={setActiveState} />
</div>
<div className="graph-element" style={{ top: "50px", right: "0px" }}>
{/* ✅ 只读状态可直接传入，无需 updateState */}
<GraphElement active_state={activeState} />
</div>
</div>
</div>
);
}
export default App;在 ToolbarElement 中，禁止对 active_state 进行赋值操作（如 active_state.graph_data = ...），而应始终调用 setActiveState 并返回新对象：
function ToolbarElement({ setActiveState }) {
const handleButtonClick = () => {
console.log('Button clicked!');
fetch("/data")
.then(res => res.json())
.then(data => {
// ✅ 正确：使用函数式更新，保留原有字段并覆盖目标字段
setActiveState(prev => ({
...prev,
graph_data: Array.isArray(data) && data.length > 0 ? data[0] : prev.graph_data
}));
})
.catch(err => console.error("Failed to fetch data:", err));
};
return (
<div style={{ height: '33.33%', backgroundColor: '#F0F0F0' }}>
<button onClick={handleButtonClick}>Click me!</button>
</div>
);
}
export default ToolbarElement;GraphElement 仅消费状态，保持简洁无副作用：
function GraphElement({ active_state }) {
return (
<div style={{ height: '33.33%', backgroundColor: '#E8E8E8' }}>
<p>Graph Data: {active_state.graph_data}</p>
<p>Other Data: {active_state.other_data}</p>
</div>
);
}
export default GraphElement;⚠️ 关键注意事项
- 永远不要直接修改 state 对象：React 的 state 是不可变的，任何原地修改（mutation）都会破坏响应式机制，并可能引发难以调试的渲染异常。
- 优先使用函数式更新（setState(prev => {...})）：尤其当新状态依赖前一状态（如对象合并、数组更新）时，可避免闭包中捕获过期状态的问题。
- 初始状态必须明确声明：useState() 的参数是初始值，未传参则为 undefined，后续访问 activeState.graph_data 将报错。
- 按需传递 props：子组件只需接收其真正需要的数据或函数。ToolbarElement 不需要 active_state 的当前值（除非用于条件判断），只需 setActiveState；GraphElement 不需要更新能力，只读即可。
✅ 总结
实现跨组件状态共享的本质，不是“传递指针”，而是统一状态源 + 单向数据流 + 不可变更新。遵循这一模式，不仅能解决 read-only 报错，还能提升应用可预测性与可维护性。对于更复杂场景（如深层嵌套或全局状态），可逐步演进至 Context API 或 Zustand 等状态库，但基础逻辑始终不变：状态属于谁，就由谁负责更新。
