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

Question

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

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

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

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

应用程序.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>
    );
  }
}

索引.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

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

您还需要添加：

export default App;

到 App.js 的底部。

Answer 2

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

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

Answer 3

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

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

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 store from './store';

enter code here

Answer 4

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