Контекст реакции из библиотеки не обновляется у потребителя - PullRequest
2 голосов
/ 05 августа 2020

Я изначально следил за этим проектом , чтобы добавить Firebase в приложение Gatsby React. Он включает в себя создание контекста Firebase, обертывание макета root с помощью поставщика, а затем использование withFirebase HO C для обертывания компонентов с помощью потребителя Firebase по мере необходимости. Когда я изначально это сделал, все работало нормально, но я хотел переместить код в пакет, который можно было бы повторно использовать в своих приложениях. Вот HO C

export const withFirebase = (Component) => (props) => (
  <FirebaseContext.Consumer>
    {(firebase) => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
);

И каждая страница начинается с компонента Layout, который отображает это:

<FirebaseContext.Provider value={this.state.firebase}>
  <AppWithAuthentication>
    {this.props.children}
  </AppWithAuthentication>
</FirebaseContext.Provider>

AppWithAuthentication сам использует withFirebase HO C как ему требуется Firebase для получения AuthUser (который затем сохраняется в контексте и передается через провайдер), и он может это сделать нормально.

Все вышесказанное происходит в самом коде пакета, но когда Я импортировал свой пакет в другой проект React, пытаясь использовать withFirebase, перестает работать, поскольку любые компоненты, заключенные в него, никогда не получают обновленный контекст. Я подтверждаю это, проверяя дерево компонентов в инструментах React Dev, поставщик Firebase получает обновленное ненулевое значение, и потребитель внутри AppWithAuthentication тоже получает его. Но потребители внутри моего фактического приложения не обновляются (и у меня такая же проблема с контекстом AuthUser, который я создал в той же библиотеке).

Я даже подумал, что, возможно, каким-то образом родительский рендеринг с обновленным потребителем но потомки не выполняли повторный рендеринг, но после подсчета рендеров и их регистрации стало ясно, что компоненты из моего приложения рендерили больше, чем AppWithAuthentication. Чтобы было немного понятнее, вот мое дерево компонентов (начиная с компонента Layout на странице root): Component Tree

Here's Provider showing a value:
Provider with value

Here's AppWithAuthentication's consumer showing a value:
Consumer with value

And here's the consumer from inside my application that doesn't have a value:
этот вопрос , который казался похожим, и попытался реализовать исправление в моем .neutrinorc.js:

const reactComponents = require('@neutrinojs/react-components');

module.exports = {
  use: [reactComponents(),
  (neutrino) => {
     neutrino.config.output.library("upe-react-components");
     neutrino.config.output.libraryTarget("umd");
     neutrino.config.mode("development");
    }],
};

Но этого не произошло исправить проблему. Кто-нибудь сталкивался с проблемами с веб-пакетом, нарушающим контекст React?

1 Ответ

1 голос
/ 05 августа 2020

Я слышал от своего умного друга, что проблема в том, что контексты React определены на уровне модуля, и, поскольку вы пытались разместить свои контексты в отдельных точках входа, go все будет не так хорошо.

Думаю, вы можете попробовать создать файл index. js, который повторно импортирует и экспортирует все, и тогда все должно работать, поскольку все это объединено в один модуль.

...