при избыточном сохранении axios вызывает локальный хост вместо defaults.baseURL - PullRequest
Новая
       26

при избыточном сохранении axios вызывает локальный хост вместо defaults.baseURL

0 голосов
/ 23 апреля 2019

Моей главной проблемой было поддержание избыточного состояния, поскольку оно содержит аутентификацию вошедшего в систему пользователя.В начале всякий раз, когда страница перезагружалась (обновлялась), я получал сообщение об ошибке, когда состояние исчезало.

После небольшого исследования 2 варианта были либо сохранить мои данные в localStorage, либоиспользовать что-то вроде Redux-Persist.Я использовал второй вариант.

Проблема, которая возникла, заключается в том, что всякий раз, когда страница перезагружается, кажется, что какой-то код запускается до того, как redux-persist снова вернет состояние обратно.Это только мое предположение, поскольку я довольно новичок, чтобы реагировать.

Ошибка, которую я получаю: 

GET http://127.0.0.1:3000/my-call-path/ 404 (Not Found)

Помня, что я должен позвонить другомуURL, который я устанавливаю в axios.defaults.baseURL (это установлено в моем файле App.js внутри ComponentDidMount () & ComponentDidUpdate () функции) .Это отображается как ошибка консоли в браузере, однако кажется, что страница продолжает загружаться правильно, и все данные извлекаются в порядке.

Вот мой код:

index.js 

import React from "react";
import ReactDOM from "react-dom";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter as Router } from "react-router-dom";
import { Provider } from "react-redux";
import './app/css/app.css'
import App from "./app/App";
import { configureStore } from "./app/store/configureStore";
import ScrollToTop from "./app/util/ScrollToTop";
import { PersistGate } from 'redux-persist/integration/react'
import Loader from './app/components/layout/Loader'

const { store, persistor } = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={<Loader loading={true} />} persistor={persistor}>
      <Router>
        <ScrollToTop>
          <App />
        </ScrollToTop>
      </Router>
    </PersistGate>
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister();

App.js 

class App extends Component {
  componentDidMount() {
    const locale = getLocale();
    if (locale) {
      this.props.setLocale(locale);
      document.body.classList.add(locale);
      axios.defaults.baseURL = `http://my-backend-ip/backend/api/${locale}/`;
    } else {
      localStorage.setItem("my-project-locale", "en");
      const locale = getLocale();
      document.body.classList.add(locale);
      this.props.setLocale(locale);
      axios.defaults.baseURL = `http://my-backend-ip/backend/api/${locale}/`;
    }

    const token = getJWT();
    if (token) {
      setAuthorizationHeader(token);
      this.props.autoSignIn();
    }
  }

  componentDidUpdate(prevProps) {
    if (prevProps.locale !== this.props.locale) {
      localStorage.setItem("my-project-locale", this.props.locale);
      const locale = getLocale();
      document.body.classList.remove("en", "ar");
      document.body.classList.add(locale);
      axios.defaults.baseURL = `http://my-backend-ip/backend/api/${locale}/`;
    }
  }

  render() {
    if (this.props.loading) {
      return <Loader loading={this.props.loading} />;
    } else {
      return (
        <>
          <Auth>
            <ToastContainer
              position="top-center"
              autoClose={false}
              newestOnTop={true}
              transition={Slide}
              draggable
              pauseOnFocusLoss
              pauseOnHover
            />
            <Switch>
              <Route path="/" exact component={GateWay} />
            </Switch>

            <Route
              path="/(.+)"
              render={() => (
                <Layout>
                  <Switch>
                    <Route
                      path="/dashboard"
                      component={Dashboard}
                    />
                    ... // other different routes
                    <Route component={Error404} />
                  </Switch>
                </Layout>
              )}
            />
          </Auth>
        </>
      );
    }
  }
}

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

Надеюсь, это поможет выявить проблему.Пожалуйста, дайте мне знать, если мне нужно добавить еще код.

Заранее спасибо.

...