Доступ к контексту React вне компонента - PullRequest
Новая
       41

Доступ к контексту React вне компонента

0 голосов
/ 14 января 2019

Я использую контекст React для хранения локали для веб-сайта NextJS (например, example.com/en/). Настройка выглядит следующим образом:

компоненты / Locale / 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 };

страниц / _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>
    };
  }
}

Пока все хорошо. Теперь на одной из моих страниц я получаю данные из Contentful CMS API в методе жизненного цикла getInitialProps. Это выглядит примерно так:

страниц / index.jsx 

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

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

На этом этапе мне нужно выполнить этот запрос с локалью, поэтому мне нужно получить доступ к Local.Consumer в приведенном выше getInitialProps. Это возможно?

1 Ответ

0 голосов
/ 01 марта 2019

Это не представляется возможным в соответствии с документацией здесь: https://github.com/zeit/next.js/#fetching-data-and-component-lifecycle Вы получаете доступ к данным контекста React, помещая свой компонент в Consumer контекста следующим образом: 

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

Но getInitialProps запускается для страниц верхнего уровня и не имеет доступа к реквизитам.

Можете ли вы получить записи в другом методе жизненного цикла React, например componentDidMount? Тогда вы можете хранить ваши предметы в состоянии компонента.

...