Реакция: топор ios. Перехватчики не работают в hoc - PullRequest
Новая
       72

Реакция: топор ios. Перехватчики не работают в hoc

2 голосов
/ 13 февраля 2020

ax ios .interceptors in ho c withErrorHandler работают для щелкающего метода в App. js, но не работают для componentWillMount или componentDidMount в App. js. Как я могу это исправить?

Приложение. js

class App extends Component {
  componentDidMount() {
    axios.get('https://wrongaddress')
        .then(response => {
          console.log(response);
        });
  }

  clicked() {
      axios.get('https://wrongaddress')
          .then(response => {
              console.log(response);
          });
  }

  render() {
    return (
        <button onClick={this.clicked}>btn</button>
    );
  }
}
export default withErrorHandler(App, axios);

hoc / withErrorHandler. js

const withErrorHandler = ( WrappedComponent, axios ) => {
    return class extends Component {
        componentDidMount() {
            axios.interceptors.request.use(req => {
                console.log(req);
                return req;
            });
        }

        render() {
            return (
                <WrappedComponent {...this.props} />
            );
        }
    }
};

1 Ответ

1 голос
/ 13 февраля 2020

Вы добавляете перехватчик в ho c сразу после первого рендера. И вы используете топор ios в componentWillMount в приложении. componentWillMount находится перед первым рендерингом.

Я предлагаю разместить в приложении вызов ax_ ios для componentDidMount. В любом случае рекомендуется поместить все побочные эффекты, такие как загрузка данных, в componentDidMount. Проверьте документацию здесь: https://reactjs.org/docs/react-component.html#componentdidmount

class App extends Component {
  componentdidMount() {
    axios.get('https://wrongaddress')
        .then(response => {
          console.log(response);
        });
  }

...

Также вы можете переместить обработку перехватчика в HO C в componentWillMount. 

const withErrorHandler = ( WrappedComponent, axios ) => {
    return class extends Component {
        componentWillMount() {
            axios.interceptors.request.use(req => {
                console.log(req);
                return req;
            });
        }
...