У меня есть hitComponent, который отображает список статей в блоге. Когда пользователь нажимает на элемент Read more, идентификатор статьи блога сохраняется и перенаправляется на новую страницу (p / [slug]. js).
Проблема Невозможно получить идентификатор статьи блога в PostComponent.getInitialProps с store.getState (). Возвращается пустой JSON.
Добавлен провайдер:
//index.js
class AppWrapper extends React.Component {
render () {
return (
<Provider store={store}>
<App/>
</Provider>
)
}
}
Я добавил обе мои страницы в StaticRouter следующим образом:
//App.js
class App extends Component {
render () {
return (
<Router>
<Switch>
<Route exact path="/" component={AlgoliaComponent}/>
<Route path="/p/[slug]" component={PostComponent}/>
</Switch>
</Router>
)
}
}
Ссылка элемент, который помещает идентификатор товара в магазин:
//Hit.component.jsx
const HitTemplate = (props) => {
...
return (
<Link href={{pathname: `p/${props.hit.title.replace(/[.:+?'$()|[\]\\]/g, '').trim().replace(/ /gi, '-').replace(/--/gi, '-').toLowerCase()}`,}}>
<a onClick={props.handleClick} id={props.hit.id}>Continue reading</a>
</Link>
)
...
}
class HitComponent extends Component {
constructor (props) {
super(props)
this.handleClick = this.handleClick.bind(this)
}
handleClick (event) {
this.props.showTheHit(event.target.id)
}
render () {
const { hit } = this.props
return (
<HitTemplate hit={hit} handleClick={this.handleClick}/>
)
}
}
//Hit.container.js
const mapStateToProps = (state, ownProps) => {
return {
id: state.id,
hit: ownProps.hit
}
}
const mapDispatchToProps = (dispatch) => {
return {
showTheHit: (id) => {
dispatch(showHit(id))
}
}
}
export const HitContainer = connect(
mapStateToProps,
mapDispatchToProps
)(HitComponent)
******** Моя проблема здесь ********
//[slug].js
class PostComponent extends Component {
render () {
...
}
}
PostComponent.getInitialProps = async function () {
//This returns an empty JSON
console.log(store.getState())
...
}