在使用者中响应库中未更新的上下文

Question

我最初跟随这个项目将Firebase添加到Gatsby应用程序中。它涉及到创建一个Firebase上下文，用一个提供程序包装一个根布局，然后使用一个withFirebase自组织来根据需要使用Firebase使用者包装组件。当我最初这样做的时候，它运行得很好，但是我想把代码移到一个可以在我的应用程序中重用的包中。这是特别的

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

每个页面都以一个布局组件开始，该组件呈现如下内容：

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

AppWithAuthentication本身使用withFirebase HOC，因为它需要Firebase来获取AuthUser (然后将其存储在上下文中并通过提供程序传递)，而且它能够很好地做到这一点。

所有这些都发生在包代码本身中，但是当我将包导入到我的另一个React项目中时，尝试使用withFirebase停止工作，因为任何与它包装在一起的组件都不会接收更新的上下文。我通过检查React工具中的组件树来确认这一点，Firebase提供程序获得更新的非空值，而AppWithAuthentication内部的使用者也得到它。但是我的实际应用程序中的用户不会更新(我在同一个库中创建的AuthUser上下文也有同样的问题)。

我甚至认为父母可能是在用更新的消费者进行渲染，但是孩子们并没有重新呈现，但是在计算了呈现和记录之后，很明显，我的应用程序中的组件渲染的次数比AppWithAuthentication还要多。为了使它更加清晰，下面是我的组件树(从页面根目录下的布局组件开始)：

​

下面的提供者显示了一个值：

​

以下是AppWithAuthentication的消费者展示的价值：

​

下面是我的应用程序内部的使用者，没有的值：

​

我完全被困在这里了，我会很感激你的任何见解。

编辑:经过更多的测试后，我发现了一些更多的信息，但我仍然被困住了。在重新加载我的页面时，Layout组件呈现2次，Header组件和AppWithAuthentication组件各呈现4次，而Login组件只呈现1次。这就是消费者不更新的原因吗？(但是，当Header组件的更新与AppWithAuthentication一样多时，它为什么得不到任何更新呢？)

编辑2:经过更多的研究，我认为这个问题与webpack有关吗？我使用Neutrino.js来创建组件库，并将其构建的输出作为库。我找到了类似的这个问题，并尝试在我的.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");
    }],
};

但这并没有解决问题。有没有人遇到过webpack打破反应语境的问题？

Answer 1

我从一位聪明的朋友那里听说，问题在于，因为React上下文是在模块级别定义的，所以既然您试图将上下文放在单独的入口点中，事情就不会那么顺利了。

我认为您可以尝试创建一个index.js文件，该文件可以重新导入和导出所有的东西，然后事情应该可以工作，因为它都合并在一个模块中。