Question

I am trying to add the react sticky header to my stepper.
but the problem is if I add inside my App.js its not rendering.
so I started debugging the App.js code.
if I give console inside my render method of App.js its not displaying console.log("App---->");
right now I am getting Cannot read property 'getState' of undefined error
can you tell me how to fix it.
so that in future I will fix it myself.
providing my code snippet and sandbox below

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

If you're going to render a React-Redux <Provider>, you must create a Redux store and pass it as a prop named store. I see you've got those lines in there - you should uncomment them.

Answer 2

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

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

Answer 3

You need to either pass a store to the Provider as Mark suggests, or if you have simplified your example to the point of not needing it, then remove the Provider element entirely so you are just rendering the App element. The current stack trace shows that the error is in Provider.

You also need to add:

export default App;

to the bottom of App.js.

Answer 4

可能是您没有正确设置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 5

对于其他绊脚石的人，请尝试将您的<Provider>提升到一个水平，并利用孩子的吸气剂。

Answer 6

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

Cannot read property &#39;getState&#39; of undefined error

6 个答案:

Cannot read property 'getState' of undefined error