javascript 无法读取未定义错误的属性“getState”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/54118857/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot read property 'getState' of undefined error
提问by
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
我正在尝试将 react 粘性标头添加到我的步进器中。
但问题是如果我在 App.js 中添加它不会呈现。
- 所以我开始调试 App.js 代码。
- 如果我在 App.js 的渲染方法中提供控制台，它不会显示 console.log("App---->");
- 现在我得到了无法读取未定义错误的属性“getState”
- 你能告诉我怎么修吗？
- 以便将来我自己修复它。
- 在下面提供我的代码片段和沙箱
https://codesandbox.io/s/6zv5n0ro9z
https://codesandbox.io/s/6zv5n0ro9z
App.js
应用程序.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
索引.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")
);
采纳答案by Ryan Cogswell
You need to either pass a storeto the Provideras Mark suggests, or if you have simplified your example to the point of not needing it, then remove the Providerelement entirely so you are just rendering the Appelement. The current stack trace shows that the error is in Provider.
您需要按照 Mark 的建议将 a 传递store给 the Provider，或者如果您已将示例简化到不需要它的程度，则Provider完全删除该元素，以便您只是渲染该App元素。当前堆栈跟踪显示错误在Provider.
You also need to add:
您还需要添加：
export default App;
to the bottom of App.js.
到 App.js 的底部。
回答by markerikson
If you're going to render a React-Redux <Provider>, you mustcreate a Redux store and pass it as a prop named store. I see you've got those lines in there - you should uncomment them.
如果要渲染 React-Redux <Provider>，则必须创建一个 Redux 存储并将其作为名为store. 我看到你在那里有这些行 - 你应该取消注释它们。
回答by Niyi Aromokeye
You need to pass your store as props to the wrapping Provider
您需要将您的商店作为道具传递给包装提供者
render(<Provider store={store} >
<App />
</Provider>,document.getElementById("root"));
回答by corysimmons
For anyone else stumbling on this, try to pull your <Provider>up a level and make use of your getters from a child.
对于其他在这方面磕磕绊绊的人，请尝试将您<Provider>的水平拉高并利用您的孩子的吸气剂。
