Невозможно прочитать свойство getState неопределенной ошибки
Я пытаюсь добавить липкий заголовок в свой степпер.
но проблема в том, что я добавляю в свой App.js его не рендеринг.
- поэтому я начал отлаживать код App.js.
- если я даю console внутри моего метода рендеринга App.js, он не отображает console.info ("App ---->");
- прямо сейчас я получаю сообщение Cannot read property 'getState' of undefined error
- подскажите, как это исправить.
- так что в будущем я сам исправлю.
- предоставляя свой фрагмент кода и песочницу ниже
https://codesandbox.io/s/6zv5n0ro9z
App.js
import React from "react";
import { StickyContainer, Sticky } from "react-sticky";
// ...
class App extends React.Component {
render() {
console.info("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")
);
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 7
Если вы собираетесь рендерить React-Redux <Provider>, вы должен создаете хранилище Redux и передаете его как опору с именем store. Я вижу, у вас там есть эти строки - вам следует их раскомментировать.
спасибо ... ты тоже можешь мне помочь с этим stackoverflow.com/questions/54116709/…
Вам нужно либо передать store в Provider, как предлагает Марк, либо, если вы упростили свой пример до такой степени, что он не нужен, то полностью удалите элемент Provider, чтобы вы просто визуализировали элемент App. Текущая трассировка стека показывает, что ошибка находится в Provider.
Также необходимо добавить:
export default App;
в конец App.js.
Я внес изменения в код в соответствии с вашими предложениями, но он все еще не работает ... это так запутанно, вы можете обновить его в песочнице ... предоставляя мой обновленный код ... codeandbox.io/s/6zv5n0ro9z
Вам не хватает запятой, как указывает сообщение об ошибке SyntaxError /index.js: Unexpected token, expected , (22:2).
спасибо, Райан ... ты тоже можешь мне помочь с этим stackoverflow.com/questions/54116709/…
Вам необходимо передать свой магазин в качестве реквизита поставщику упаковки
render(<Provider store = {store} >
<App />
</Provider>,document.getElementById("root"));
Если кто-то еще наткнется на это, попробуйте поднять свой <Provider> на более высокий уровень и использовать детекторы, полученные от ребенка.
Скорее всего, вы неправильно установили свойство store.
Убедитесь, что магазин импортирован таким образом.
import store from './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
Убедитесь, что вы импортировали import store from './redux/store' и провайдер pasing как <Provider store = {store}>, здесь я подчеркиваю файл `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();
Ваш ответ можно улучшить с помощью дополнительной вспомогательной информации. Пожалуйста, редактировать, чтобы добавить дополнительную информацию, такую как цитаты или документация, чтобы другие могли подтвердить, что ваш ответ правильный. Вы можете найти дополнительную информацию о том, как писать хорошие ответы в справочном центре.
Я внес изменения в код, но он все еще не работает ... это так запутанно, вы можете обновить его в песочнице ... предоставляя мой обновленный код ... codeandbox.io/s/6zv5n0ro9z