Reactjs React组件无法访问Redux存储

我的React应用程序有以下模块：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import MainApp from './MainApp';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <MainApp />
  </React.StrictMode>,
  document.getElementById('root')
);

containers/dataviewer/index.js

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

import {
  connectPath
} from '../../actions/Paths';

import Button from '@material-ui/core/Button';
import ButtonGroup from '@material-ui/core/ButtonGroup';

import TabularViewer from './TabularViewer';
import CollapsableViewer from './CollapsableViewer';
import ChartViewer from './ChartViewer';

class DataViewer extends React.Component {
  constructor() {
    super();
    this.state = {
      displayStyle: null
    }

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick = (style) => {
    this.setState({displayStyle: style})
  }

  DisplayControllers = () => {
    return (
      <ButtonGroup variant="text" color="primary" aria-label="outlined primary button group">
        <Button color={this.state.displayStyle === 'tabular'? 'secondary': 'primary'} onClick={() => this.handleClick('tabular')}>Tabular</Button>
        <Button color={this.state.displayStyle === 'collapsable'? 'secondary': 'primary'}onClick={() => this.handleClick('collapsable')}>Colapsable</Button>
        <Button color={this.state.displayStyle === 'chart'? 'secondary': 'primary'} onClick={() => this.handleClick('chart')}>Gráfico</Button>
      </ButtonGroup>
    )
  }

  DisplayComponent = () => {
    switch (this.state.displayStyle) {
      case 'tabular':
        return <TabularViewer />
      case 'collapsable':
        return <CollapsableViewer />
      case 'chart':
        return <ChartViewer />
      default:
        return <p>Seleccione un estilo de desplegado.</p>;
    }
  }

  render() {
    return (
      <div>
        <p>Data Viewer</p>
        <this.DisplayControllers />
        <this.DisplayComponent />
      </div>
    )
  }
}

const mapStateToProps = ({paths}) => {
  const {connection, path, data} = paths;

  return {
    connection,
    path,
    data
  }
}

export default connect(mapStateToProps, {connectPath})(DataViewer)

从“React”导入React；
从'react redux'导入{connect}；
进口{
连接路径
}来自“../actions/path”；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/ButtonGroup”导入按钮组；
从“./tablarviewer”导入tablarviewer；
从“/CollapsableViewer”导入CollapsableViewer；
从“/ChartViewer”导入ChartViewer；
类DataViewer扩展了React.Component{
构造函数（）{
超级（）；
此.state={
显示样式：空
}
this.handleClick=this.handleClick.bind（this）；
}
handleClick=（样式）=>{
this.setState（{displayStyle:style}）
}
显示控制器=（）=>{
返回(
this.handleClick（'tabular'）}>tabular
this.handleClick（'collapsable'）}>Colapsable
this.handleClick（'chart'）}>Gráfico
)
}
DisplayComponent=（）=>{
开关（this.state.displayStyle）{
“表格式”案例：
返回
“可折叠”案例：
返回
案例‘图表’：
返回
违约：
返回Seleccione un estilo de desplegado.
；
}
}
render（）{
返回(
数据查看器

)
}
}
常量mapStateToProps=（{path}）=>{
const{connection，path，data}=路径；
返回{
联系,，
路径
数据
}
}
导出默认连接（MapStateTrops，{connectPath}）（DataViewer）

问题是，在安装组件时，我遇到以下错误：

Error: Could not find "store" in the context of "Connect(DataViewer)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(DataViewer) in connect options.

错误：在“连接（DataViewer）”的上下文中找不到“存储”。将根组件包装在中，或在“连接选项”中将自定义的React上下文提供程序传递给和相应的React上下文使用者以进行连接（DataViewer）。

我看不出我错过了什么

编辑 容器/app.js

import React from 'react';
import DataViewer from './DataViewer';

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <DataViewer 
            database_host="127.0.0.1'"
            database_port="5432"
            database_name="TCDigital"
            database_user="postgres"
            database_password="xxxx"
            path="Ventas"
            displayStyle="collapsable"
          />
        </header>
      </div>
    );
  }
}

export default App;

从“React”导入React；
从“/DataViewer”导入DataViewer；
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
导出默认应用程序；

在哪里渲染DataViewer？@azium我添加了

app.js

，在那里渲染'DataViewer`@HuLuViCa您可以尝试删除strictmode，但我认为这不是问题所在。您也可以尝试重新安装依赖项，因为我认为这可能是一个问题（删除锁文件和节点模块，然后重新安装）。代码在我看来很好。你能在你的

MainApp.js

文件中存储console.log

以确保它不是未定义的吗？@azium我做了，并且
store
可以，它有一个内容。事实上，我发现当我重置React development server时，异常并没有消失，但在代码更改的一些渲染之后，它再次出现。你们有谁听说过这个吗？
Error: Could not find "store" in the context of "Connect(DataViewer)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(DataViewer) in connect options.

import React from 'react';
import DataViewer from './DataViewer';

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <DataViewer 
            database_host="127.0.0.1'"
            database_port="5432"
            database_name="TCDigital"
            database_user="postgres"
            database_password="xxxx"
            path="Ventas"
            displayStyle="collapsable"
          />
        </header>
      </div>
    );
  }
}

export default App;