组件包装在 Provider 中，但出现此消息：找不到 react-redux 上下文值
Posted
技术标签:
【中文标题】组件包装在 Provider 中，但出现此消息：找不到 react-redux 上下文值【英文标题】：Component is wrapped in a Provider but this message appear: could not find react-redux context value 【发布时间】：2021-10-19 17:12:14 【问题描述】：我想做一个store来保存id值，但是我家不能调用值。出现错误：找不到 react-redux 上下文值；请确保组件包装在 Provider 中
商店：
import createStore from 'redux'
const INITIAL_STATE =
data: [
684,
683
],
function ids(state = INITIAL_STATE, action)
switch(action.type)
case 'ADD_ID':
return ...state, data: [...state.data, action.id] ;
default:
return state;
const store = createStore(ids)
export default store;
idlist：
import React from 'react'
import useSelector from 'react-redux';
function Idlist()
const ids = useSelector(state => state.data);
return(
[ids]
)
export default Idlist;
我这样称呼它：
import Idlist from '../../components/Idlist';
function MainScreen()
return (
<body>
<main>
<Idlist />
</main>
</body>
)
export default MainScreen;
提供者在哪里：
import React from 'react'
import Provider from 'react-redux'
import store from './store';
import Idlist from './components/Idlist';
function App()
return (
<Provider store=store>
<Idlist/>
</Provider>
);
export default App;
de MainScreen 的渲染位置：
import Signup from './Pages/Signup/Signup';
import MainScreen from './Pages/Home/MainScreen';
const routing = (
<Router>
<Switch>
<Route exact path="/" component=Signup />
<Route path="/MainScreen" component=MainScreen />
</Switch>
</Router>
)
ReactDOM.render(
routing,
document.getElementById('root')
);
reportWebVitals();
我不知道这里出了什么问题
【问题讨论】：
您能告诉我们提供者在哪里吗？ 当然，我已经编辑了帖子 App 内的 IdList 看起来不错，所以我假设错误是由 MainScreen 中的 IdList 引发的。 MainScreen 相对于 App 呈现在哪里？ 我认为MainScreen 组件应该在 Provider 内呈现，因为 IdList 在 MainScreen 内呈现。
我现在把 MainScreen 在哪里
【参考方案1】：
使用Provider 组件包装routing。
例如
index.tsx:
import React from 'react';
import ReactDOM from 'react-dom';
import Provider from 'react-redux';
import Route, BrowserRouter as Router, Switch from 'react-router-dom';
import store from './store';
import useSelector from 'react-redux';
function Idlist()
const ids = useSelector((state: any) => state.data);
console.log(ids);
return <div>idlist</div>;
const Signup = () => <div>Signup</div>;
const MainScreen = () => (
<div>
<Idlist />
</div>
);
const routing = (
<Router>
<Switch>
<Route exact path="/" component=Signup />
<Route path="/MainScreen" component=MainScreen />
</Switch>
</Router>
);
ReactDOM.render(<Provider store=store>routing</Provider>, document.getElementById('root'));
store.ts:
import createStore from 'redux';
const INITIAL_STATE =
data: [684, 683],
;
function ids(state = INITIAL_STATE, action: any)
switch (action.type)
case 'ADD_ID':
return ...state, data: [...state.data, action.id] ;
default:
return state;
const store = createStore(ids);
export default store;
【讨论】：
以上是关于组件包装在 Provider 中，但出现此消息：找不到 react-redux 上下文值的主要内容，如果未能解决你的问题，请参考以下文章
测试自定义钩子：不变违规：找不到 react-redux 上下文值；请确保组件包装在 <Provider>
我收到错误消息：在此设置小部件上方找不到正确的 Provider<User>（已修复）
带有 Gatsby 的 Redux - 无法识别包装的提供程序