Как сделать Context API внутри Вызова Ax ios - PullRequest
Новая
       6

Как сделать Context API внутри Вызова Ax ios

0 голосов
/ 20 марта 2020

У меня есть фронтенд реакции и express бэкэнд с mongodb. Мне удалось зашифровать токен JWT, и теперь я хочу передать тот же токен в свое контекстное состояние, чтобы я мог использовать его в других компонентах для доступа к частным маршрутам. По какой-то причине, когда я пытаюсь установить контекстное API, оно вообще не обновляется, если я не использую его непосредственно с событием щелчка. Однако я хотел бы обновить состояние контекста, когда я получаю ответ от вызова Ax ios. // Context 


const AuthProvider = props => {
  const [token, setToken] = useState({
    token: ""
  });
  const addToken = UserToken => {
    setToken({ token: UserToken });
  };

  return (
    <AuthContext.Provider value={{ token, addToken, setToken }}>
      {props.children}
    </AuthContext.Provider>
  );
};

// Вызов ax ios находится внутри функции с именем this.UserSubscription 

  let self = this;

    axios
      .post(`http://localhost:5000/user/${page}`, {
        username,
        password
      })
      .then(function(res) {
        userdata = res;
        if (page === "login") {
          self.setState({
            isUser: true,
            data: res
          });
          self.context.addToken(this.state.data);
        }
        console.log("hi world");
      })
      .catch(function(error) {
        if (error.response) {

          self.setState({
            isError: true,
            error: error.response.data.msg
          });
        }
      });


<form onSubmit={this.UserSubscription} className="login-form">
                <label>Username</label>
                <input type="text" id="username" name="username" />
                <label className="label-password">Password</label>
                <input type="text" id="password" name="password" />
                <p className="error-msg">{msg}</p>
                <button
                  type="submit"
                  className="form-btn login-btn"
                >
                  {this.props.title}
                </button>
              </form>

1 Ответ

0 голосов
/ 20 марта 2020

Должно быть что-то не так с кодом, который вы не опубликовали, потому что я могу воспроизвести код, который вы опубликовали, и он работает нормально.

Обратите внимание, что токен находится в context.token.token

const AuthContext = React.createContext();
const AuthProvider = ({ children }) => {
  const [token, setToken] = React.useState({
    token: '',
  });
  const addToken = token => setToken({ token });
  return (
    
      {children}
    
  );
};
class ComponentOne extends React.Component {
  constructor(props) {
    super(props);
    Promise.resolve().then(() =>
      this.context.addToken('hello world')
    );
  }
  render() {
    return in One: {JSON.stringify(this.context.token)};
  }
}
ComponentOne.contextType = AuthContext;
const ComponentTwo = () => {
  const { token } = React.useContext(AuthContext);
  return in two: {JSON.stringify(token)}
; }; const App = () => ( ); ReactDOM.render ( , document.getElementById ('root')); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
...