web-dev-qa-db-fra.com

Accès React en dehors du composant

J'utilise React context pour stocker les paramètres régionaux pour un site Web NextJS (par exemple example.com/en/). La configuration ressemble à ceci:

composants/Paramètres régionaux/index.jsx

import React from 'react';

const Context = React.createContext();
const { Consumer } = Context;

const Provider = ({ children, locale }) => (
  <Context.Provider value={{ locale }}>
    {children}
  </Context.Provider>
);

export default { Consumer, Provider };

pages/_app.jsx

import App, { Container } from 'next/app';
import React from 'react';

import Locale from '../components/Locale';


class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {};
    const locale = ctx.asPath.split('/')[1];
    return { pageProps, locale };
  }

  render() {
    const {
      Component,
      locale,
      pageProps,
    } = this.props;

    return {
      <Container>
        <Locale.Provider locale={locale}>
          <Component {...pageProps} />
        </Locale.Provider>
      </Container>
    };
  }
}

Jusqu'ici tout va bien. Maintenant dans une de mes pages, j'obtiens des données de Contentful CMS API dans la méthode de cycle de vie getInitialProps. Cela ressemble un peu à ceci:

pages/index.jsx

import { getEntries } from '../lib/data/contentful';

const getInitialProps = async () => {
  const { items } = await getEntries({ content_type: 'xxxxxxxx' });
  return { page: items[0] };
};

À ce stade, je dois effectuer cette requête avec les paramètres régionaux, je dois donc accéder à Local.Consumer dans ce qui précède getInitialProps. Est-ce possible?

reactjslocalizationnext.jscontentful
6
Coop

Cela ne semble pas être possible selon la documentation ici: https://github.com/zeit/next.js/#fetching-data-and-component-lifecycle Vous accédez React en enveloppant votre composant dans le consommateur du contexte comme ceci:

<Locale.Consumer>
  ({locale}) => <Index locale={locale} />
</Locale.Consumer>

Mais getInitialProps est exécuté pour les pages de niveau supérieur et n'a pas accès aux accessoires.

Pouvez-vous obtenir vos entrées dans une autre React cycle de vie, comme componentDidMount? Ensuite, vous pouvez stocker vos articles dans l'état du composant.

2
Gordon Burgett