反应上下文提供者不更新Class.contextType

Question

我的应用程序使用React Context Provider传递用户配置文件。在我的App组件中，我的状态定义为：

interface IState {

  authUser: any;

  userProfile: IProfile;

  roles: string[];

}

在我的componentDidMount方法中，我使用fetch调用了三个不同的API。然后，结果为相应的条目调用setState。我的应用程序的渲染部分是：

<AuthenticationContext.Provider value={this.state}>

        <BrowserRouter>

          <div>

            <Navigation />

            <Switch>

/* Other routes removed for brevity */

              <Route exact={true} path={routes.HOME} component={Home} />

            </Switch>

            <Footer />

          </div>

        </BrowserRouter>

      </AuthenticationContext.Provider>

在Home组件中，我这样使用静态的Class.contextType条目：

public static contextType = AuthenticationContext;

public context!: React.ContextType<typeof AuthenticationContext>;

然后，在componentDidMount方法中，我正在调用另一个带有this.context.userProfile对象中的条目的API。

我添加了控制台日志语句来跟踪生命周期。当我重新加载页面时，得到以下信息：

Calling /api/profiles/getAdminStatus/7J4OwwnmQ1fMhavSLeLkDkKe9Kl2

Calling getProfile within App

Calling /api/profiles/7J4OwwnmQ1fMhavSLeLkDkKe9Kl2 within getProfile

Calling /api/profiles/7J4OwwnmQ1fMhavSLeLkDkKe9Kl2 within getLookingFor

Calling loadProfiles

Calling getFilterResults with Userid: 

Calling /api/search

About to setState in getProfile within App: UserId: 7J4OwwnmQ1fMhavSLeLkDkKe9Kl2

getFilterResults显示一个空白的Userid条目。但是，如果我浏览到另一个页面，然后返回此页面，则会得到以下结果：

Calling /api/profiles/7J4OwwnmQ1fMhavSLeLkDkKe9Kl2 within getLookingFor

Calling loadProfiles

Calling getFilterResults with Userid: 7J4OwwnmQ1fMhavSLeLkDkKe9Kl2

Calling /api/search

根据这些消息，我确定问题是在加载Home组件之前没有返回获取当前用户的初始调用。但是，我不明白为什么setState发生时为什么不重新渲染组件。我在主页内容周围添加了Consumer Component，但这没有帮助。

我想到了将结果列表和方法列表也推到Context的想法，这样我就可以避免使用静态contextType，但这对我来说似乎有点棘手。

关于我可能做错了什么的任何想法？？？

Answer 1

经过大量研究，看来处理此问题的正确方法是在Context对象中实际添加方法，这些方法会修改App内的状态（或包含Context.Provider对象的任何组件）。