Реагирующий провайдер контекста не обновляет Class.contextType

Question

Мое приложение использует React Context Provider для передачи профиля пользователя. В моем компоненте приложения мое состояние определено как:

interface IState {
  authUser: any;
  userProfile: IProfile;
  roles: string[];
}

В моем методе componentDidMount я вызываю три разных API, использующих fetch. Затем результаты вызывают 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 я вызываю другой API с записями из объекта this.context.userProfile.

Я добавил операторы консоли, чтобы отслеживать весь жизненный цикл. Когда я выполняю перезагрузку страницы, я получаю это:

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 показывает пустую запись идентификатора пользователя. Однако, если я перехожу на другую страницу и затем возвращаюсь на эту страницу, я получаю следующие результаты:

Calling /api/profiles/7J4OwwnmQ1fMhavSLeLkDkKe9Kl2 within getLookingFor
Calling loadProfiles
Calling getFilterResults with Userid: 7J4OwwnmQ1fMhavSLeLkDkKe9Kl2
Calling /api/search

Основываясь на сообщениях, я уверен, что проблема заключается в том, что первоначальные вызовы для получения текущего пользователя не возвращаются до загрузки компонента Home. Однако я не понимаю, почему компонент не перерисовывается, когда происходит setState. Я добавил компонент Consumer вокруг содержимого домашней страницы, но это не помогло.

У меня возникла идея подтолкнуть список результатов и методов к контексту, чтобы я мог избежать использования статического contextType, но мне это кажется хакерским.

Есть мысли о том, что я мог сделать неправильно ???

***** ***** Редактировать Это домашний компонент:

interface IHomeComponentState {
  profiles: IProfileShort[];
  hasMore: boolean;
  error: boolean;
  isLoading: boolean;
}
class HomeComponent extends React.Component<any, IHomeComponentState> {
  public static contextType = AuthenticationContext;
  public _isMounted = false;
  public context!: React.ContextType<typeof AuthenticationContext>;
  private currentPage: number = 0;

  constructor(props: any) {
    super(props);
    this.state = {
      profiles: [],
      hasMore: true,
      error: false,
      isLoading: false,
    };
    this.loadProfiles.bind(this);

    window.onscroll = () => {
      if (this.state.error || this.state.isLoading || !this.state.hasMore) {
        return;
      }

      if (
        window.innerHeight + document.documentElement.scrollTop ===
        document.documentElement.offsetHeight
      ) {
        this.loadProfiles();
      }
    };
  }

  public loadProfiles() {
    if (this.context) {
      const value = this.context;
      // tslint:disable-next-line: no-console
      console.log(
        'Calling getFilterResults with Userid: ' + value.userProfile.userId,
      );

      getFilterResults(
        value.userProfile.gender,
        value.userProfile.lookingForGender,
        value.userProfile.minAge,
        value.userProfile.maxAge,
        value.userProfile.connectionType,
        value.userProfile.dateOfBirth,
        this.currentPage,
      )
        .then(newProfiles => {
          this.setState(
            {
              profiles: [...this.state.profiles, ...newProfiles],
            },
            () => {
              this.currentPage = this.currentPage + 1;
            },
          );
        })
        .catch();
    }
  }

  public componentDidMount() {
    // tslint:disable-next-line: no-console
    console.log('Calling loadProfiles');
    this.loadProfiles();
  }

  public render() {
    return (
      <Grid container justify="center" direction="column" alignContent="center">
        <Paper>
          <Grid container item spacing={40} style={{ maxWidth: '840px' }}>
            {this.state.profiles.map(profile => (
              <Grid
                key={profile.userId}
                item
                sm={6}
                style={{ maxWidth: '200px' }}
              >
                <Link
                  to={`/profile/${profile.userId}`}
                  style={{ textDecoration: 'none' }}
                >
                  <ProfileCard
                    key={profile.userId}
                    name={profile.name}
                    picUrl={profile.picUrl}
                    userId={profile.userId}
                    age={profile.age}
                    orientation="horizontal"
                    location={profile.location}
                  />
                </Link>
              </Grid>
            ))}
          </Grid>
        </Paper>
      </Grid>
    );
  }
}

const authCondition = (authUser: any) => !!authUser;

export const Home = withAuthorization(authCondition)(HomeComponent);

Кроме того, обе мои версии реакции и реагирования - 16.8.6.

Answer 1

После долгих исследований выясняется, что правильный способ справиться с этим - добавить методы в объект Context, который изменяет состояние в приложении (или в любом другом компоненте, в котором находится объект Context.Provider.