本文详解 React Context API 的正确使用方式：通过统一的 Context Provider 包裹路由，使状态在组件间持久共享，避免因路由跳转导致状态丢失。
本文详解 React Context API 的正确使用方式：通过统一的 Context Provider 包裹路由，使状态在组件间持久共享，避免因路由跳转导致状态丢失。
在 React 应用中使用 Context API 实现跨组件状态共享时，一个常见误区是在每个消费组件内部各自提供 Context（即多次渲染 <provider></provider>）。正如你在 CreateComposition 和 Compositions 中分别包裹 <compositionscontext.provider></compositionscontext.provider> 所做的那样——这会导致两个完全隔离的 Context 实例，彼此状态互不感知，且一旦组件卸载（如路由跳转），其局部 useState 便会重置，造成数据“消失”。
✅ 正确做法是：将 Context Provider 提升至路由之上，作为整个功能模块的统一状态容器。这样无论用户在 /createcomposition 和 /compositions 之间如何跳转，compositions 数组始终由同一个 useState 管理，保持持久化。
以下是重构后的推荐结构：
1. 创建可复用的 Context 与 Hook
// contexts/CompositionsContext.js
import { createContext, useContext, useState } from 'react';
const CompositionsContext = createContext();
export const useCompositions = () => {
const context = useContext(CompositionsContext);
if (!context) {
throw new Error('useCompositions must be used within a CompositionsContextProvider');
}
return context;
};
export const CompositionsContextProvider = ({ children }) => {
const [compositions, setCompositions] = useState([]);
const addNewComposition = (newComp) => {
setCompositions(prev => [...prev, newComp]);
};
return (
<CompositionsContext.Provider value={{ compositions, addNewComposition }}>
{children}
</CompositionsContext.Provider>
);
};2. 消费 Context 的功能组件（无 Provider）
// components/CreateComposition.jsx
import { useState } from 'react';
import { useCompositions } from '../contexts/CompositionsContext';
const CreateComposition = () => {
const { addNewComposition } = useCompositions();
const [taal, setTaal] = useState('');
const [bpm, setBpm] = useState('');
const [name, setName] = useState('');
const addNewCompositionHandler = () => {
const newComposition = `${taal} ${bpm} ${name}`;
addNewComposition(newComposition);
setTaal('');
setBpm('');
setName('');
};
return (
<>
<h2>Input Kayeda Details Below</h2>
<label><b>Taal</b> <input value={taal} onChange={e => setTaal(e.target.value)} /></label>
<br />
<label><b>BPM</b> <input value={bpm} onChange={e => setBpm(e.target.value)} /></label>
<br />
<label><b>Name</b> <input value={name} onChange={e => setName(e.target.value)} /></label>
<br />
<button onClick={addNewCompositionHandler}>Add Composition</button>
<br />
<Link to="/compositions" className="btn"><h2>Compositions</h2></Link>
</>
);
};
export default CreateComposition;// components/Compositions.jsx
import { useCompositions } from '../contexts/CompositionsContext';
const Compositions = () => {
const { compositions } = useCompositions();
return (
<>
<Link to="/createcomposition" className="btn"><h1>Create Compositions</h1></Link>
<h2>List of Compositions</h2>
{compositions.length === 0 ? (
<p>No compositions yet.</p>
) : (
<ul>
{compositions.map((comp, i) => (
<li key={i}>{comp}</li>
))}
</ul>
)}
</>
);
};
export default Compositions;3. 在路由根节点注入 Provider
// main.jsx 或 App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { CompositionsContextProvider } from './contexts/CompositionsContext';
import CreateComposition from './components/CreateComposition';
import Compositions from './components/Compositions';
function App() {
return (
<BrowserRouter>
<CompositionsContextProvider>
<Routes>
<Route path="/createcomposition" element={<CreateComposition />} />
<Route path="/compositions" element={<Compositions />} />
<Route path="/" element={<CreateComposition />} />
</Routes>
</CompositionsContextProvider>
</BrowserRouter>
);
}
export default App;⚠️ 关键注意事项
-
Provider 必须唯一且稳定：它不能随路由切换而重新挂载/卸载，否则状态会重置；因此必须置于
BrowserRouter和Routes外层。 -
避免在 Consumer 中重复 Provider：
Compositions组件不再需要<compositionscontext.provider></compositionscontext.provider>—— 它只负责读取，不负责提供。 -
推荐封装自定义 Hook：
useCompositions()不仅提升可读性，还能集中处理 Context 不存在时的错误提示，增强健壮性。 -
状态更新应保持不可变性：使用
setCompositions(prev => [...prev, newItem])而非直接修改原数组。
通过以上结构，compositions 状态真正实现了“跨文件、跨路由”的全局共享，既符合 React 最佳实践，也确保了用户体验的一致性与数据可靠性。
