已用Provider包裹组件仍报could not find react-redux context value错误如何解决

问题根因 #

你编写的包裹了Provider的App组件没有被实际挂载到页面根节点，根渲染逻辑直接使用了独立的路由配置对象，所有路由页面（包括MainScreen）都没有被Redux的Provider上下文包裹，因此Idlist组件调用useSelector时无法找到对应的Redux上下文，抛出对应错误。

修复步骤 #

1. 调整Provider包裹范围，覆盖所有路由页面

将路由逻辑移入App组件，让Provider包裹所有路由入口，修正后的App.js代码如下：

import React from 'react'
import { Provider } from 'react-redux'
import store from './store';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
import Signup from './Pages/Signup/Signup';
import MainScreen from './Pages/Home/MainScreen';

function App() {
  return (
    <Provider store={store}>
      <Router>
        <Switch>
          <Route exact path="/" component={Signup} />
          <Route path="/MainScreen" component={MainScreen} />
        </Switch>
      </Router>
    </Provider>
  );
}

export default App;

2. 修正根渲染逻辑，渲染App组件

修改根渲染代码，直接挂载已经包裹了Provider和路由的App组件：

import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

reportWebVitals();

其他关联问题修复 #

1. Idlist组件返回值修正

当前Idlist直接返回数组不符合React组件返回规范，需调整为合法JSX结构，示例如下：

import React from 'react'
import { useSelector } from 'react-redux';

function Idlist() {
    const ids = useSelector(state => state.data);
    return(
        <div className="id-list">
            {ids.map(id => <span key={id}>{id}</span>)}
        </div>
    )
}

export default Idlist;

2. MainScreen标签规范修正

不要在组件内部使用<body>标签，<body>是HTML全局顶层标签，组件内仅需编写业务DOM即可：

import Idlist from '../../components/Idlist';

function MainScreen() {
    return (
        <main>
            <Idlist />
        </main>
    )
}

export default MainScreen;

内容的提问来源于stack exchange，提问作者Gabriel Oliveira Menezes