Предупреждение: обновление в переходе состояния при доступе к приложению через страницу обратного вызова и обновлении контекста отсюда

Question

У меня есть приложение, состоящее из двух страниц, домашней страницы и страницы обратного вызова. После проверки подлинности в службе уровня, такой как социальная сеть или другая, пользователь перенаправляется на страницу обратного вызова моего приложения. Приложение использует api реагирования на контекст, и я хотел бы сохранить все данные, найденные в строке запроса на странице обратного вызова. Вскоре я хочу открыть страницу моего приложения, а не домашнюю страницу, и обновить контекст приложения с этой страницы.

Это то, что достигается в этом уроке для Auth0. Приложение состоит из 5 очень коротких файлов, я воспроизведу их здесь.

Проблема в том, что я получаю предупреждение при доступе к http://127.0.0.1:3000/callback в браузере. Предупреждение Warning: Cannot update during an existing state transition (such as within рендер ). Render methods should be a pure function of props and state. В учебнике Auth0 это предупреждение не отображается, но обновление состояния выполняется в рамках специальной функции, я не знаю, как воспроизвести эту работу с моими собственными компонентами.

Чтобы воспроизвести предупреждение, используйте create-react-app и используйте файлы в конце поста. Цель этого игрушечного примера - установить unused_data в состоянии компонента Context, но без вызова предупреждения (на самом деле установлено unused_data).

РЕДАКТИРОВАТЬ: Ну, я изучил Redux, и все отлично работает, когда я использую Redux, так что я до сих пор не знаю, почему я получил ошибку, но теперь все намного проще:)

---

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Context from "./Context";
import Callback from './Callback'
import Home from './Home'

class App extends Component {
  render() {
    return (
      <div className="App">
        <Context>
          <Router>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/callback" component={Callback} />
            </Switch>
          </Router>
        </Context>
      </div>
    );
  }
}

export default App;

---

Context.js

import React, {Component} from "react";
import {Provider} from "./contextDefs";


class Context extends Component {
  state = {
    unused_data: ""
  };

  changeState = () => {
    this.setValue()
  }

  setValue = () => {
    this.setState({
      unused_data: "has been set up",
    })
  }

  render() {
    const providerValue = {
      ...this.state,
      changeState: this.changeState,
    };
    return (
      <Provider value={providerValue}>
        {this.props.children}
      </Provider>
    );
  }
}

export default Context;

---

Callback.js

import React from "react";
import {Redirect} from "react-router-dom";

import {Consumer} from "./contextDefs";

const callback = props => (
  <Consumer>
    {({changeState}) => {
        changeState();
        return <Redirect to="/"/>;
      }
    }
  </Consumer>
)

export default callback;

---

contextDefs.js

import { createContext } from "react";

const Context = createContext({
    unused_data: "",
    changeState: () => {},
  });

export const Provider = Context.Provider;
export const Consumer = Context.Consumer;

---

Home.js

import React from "react";

const AuthTwitter = props =>  {
  return (
  <div>
    Test
  </div>
  );
}

export default AuthTwitter;