store.getState () возвращает пустое значение JSON - React-redux и StaticRouter - PullRequest
0 голосов
/ 31 марта 2020

У меня есть 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()) 
  ...
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...