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

dly7yett  于 12个月前  发布在  React
关注(0)|答案(7)|浏览(116)
  • 我正试图添加React粘性头到我的步进。
  • 但问题是,如果我在App.js中添加,它不会呈现。
  • 所以我开始调试App.js代码。
  • 如果我在App.js的呈现方法中给予console,它就不会显示console.log(“App->”);
  • 现在我得到无法读取属性'getState'的未定义错误
  • 能告诉我怎么修吗?
  • 这样以后我就可以自己修理了。
  • 下面提供我的代码片段和沙箱

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")
);
xghobddn

xghobddn1#

您需要像Mark建议的那样将store传递给Provider,或者如果您已经简化了示例,不需要它,则完全删除Provider元素,因此您只需呈现App元素。当前堆栈跟踪显示错误在Provider中。
您还需要添加:

export default App;

在App.js的底部。

0s0u357o

0s0u357o2#

您需要将您的商店作为 prop 传递给 Package 提供程序

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

svmlkihl3#

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

bzzcjhmw4#

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

2vuwiymt

2vuwiymt5#

对于其他在这方面遇到困难的人,试着把你的<Provider>提升一个级别,并利用你的孩子的getter。

elcex8rz

elcex8rz6#

确保你已经导入了import store from './redux/store'和帕辛provider作为<Provider store={store}>,我在这里强调的是“store”文件,导入必须是小写字母,不能是 Camel 或 Camel 。这是我在Redux学习过程中发现的。

jjjwad0x

jjjwad0x7#

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();

相关问题