无法读取未定义错误的属性“getState”

Question

• 我正在尝试将 react 粘性标题添加到我的步进器。

• 但问题是，如果我在 App.js 中添加它不会呈现。

• 于是我开始调试 App.js 代码。
• 如果我在 App.js 的渲染方法中提供控制台，它不会显示 console.log("App---->");
• 现在我收到无法读取未定义错误的属性“getState”
• 你能告诉我如何解决它吗？
• 以便将来我自己修复它。
• 在下面提供我的代码 sn-p 和沙箱

https://codesandbox.io/s/6zv5n0ro9z

App.js

import React from "react";
import { StickyContainer, Sticky } from "react-sticky";
// ...

class App extends React.Component {
  render() {
    console.log("App---->");
    return (
      <StickyContainer>
        {/* Other elements can be in between `StickyContainer` and `Sticky`,
        but certain styles can break the positioning logic used. */}
        <Sticky>
          {({
            style,

            // the following are also available but unused in this example
            isSticky,
            wasSticky,
            distanceFromTop,
            distanceFromBottom,
            calculatedHeight
          }) => <header style={style}>{/* ... */}</header>}
        </Sticky>
        {/* ... */}
      </StickyContainer>
    );
  }
}

index.js

import React from "react";
//import ReactDOM from "react-dom";
import Demo from "./demo";
import App from "./components/App";
import { render } from "react-dom";
import { logger } from "redux-logger";
import { Provider } from "react-redux";

import { createStore, applyMiddleware } from "redux";
//import reducer from "./reducers";
import thunk from "redux-thunk";

//const store = createStore(reducer, applyMiddleware(thunk, logger));

//ReactDOM.render(<Demo />, document.querySelector("#root"));

render(
  //     <Provider store={store}>
  <Provider>
    <App />
  </Provider>,
  document.getElementById("root")
);

Answer 1

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './routes/App';
import * as serviceWorker from './serviceWorker';
import { Provider } from "react-redux";
import store from './store';

ReactDOM.render(
  
    <Provider store={store}>
      <React.StrictMode> 
      <App />
      </React.StrictMode>
    </Provider>,

  document.getElementById('root')
);

 
serviceWorker.unregister();

Answer 2

确保您已导入import store from './redux/store' 并将提供程序作为 <Provider store={store}> 传递，这里我强调的是“存储”文件，并且导入必须是小写字母，不能是驼色或大写字母。这是我在redux学习过程中发现的。

Answer 3

您可能没有正确设置 store 属性。

确保以这种方式导入商店。

import store from './store';

而不是下面的方式

从 './store' 导入 {store}；

<!-- begin snippet: js hide: false console: true babel: false -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

 import store from './store';

运行代码应如下所示

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './routes/App';
import * as serviceWorker from './serviceWorker';
import { Provider } from "react-redux";
import store from './store';

ReactDOM.render(
  
    <Provider store={store}>
      <React.StrictMode> 
      <App />
      </React.StrictMode>
    </Provider>,

  document.getElementById('root')
);

 
serviceWorker.unregister();

enter code here

Answer 4

您需要按照 Mark 的建议将 store 传递给 Provider，或者如果您已将示例简化到不需要它的程度，则完全删除 Provider 元素，这样您就可以渲染App 元素。当前堆栈跟踪显示错误在Provider。

您还需要添加：

export default App;

到 App.js 的底部。

Answer 5

对于遇到此问题的其他人，请尝试将您的 <Provider> 提升一个级别，并利用您的孩子的吸气剂。

Answer 6

您需要将您的商店作为道具传递给包装提供者

render(<Provider store={store} >
          <App />
       </Provider>,document.getElementById("root"));

Answer 7

如果您要渲染 React-Redux <Provider>，您必须创建一个 Redux 存储并将其作为名为 store 的 prop 传递。我看到你有那些行 - 你应该取消注释它们。