this.props во внешней функции извлечения не определено

Question

Я использую React.js для своего проекта.У меня проблема с this.props во внешней функции извлечения.Вот мой код

export default function request(method, url, body) {
  console.log(this); //undefined here
  if (method === "GET") {
    body = undefined;
  }
  return fetch(url, {
    method,
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
      Authorization: "Bearer " + token
    },
    body
  }).then(res => {
    console.log(this); //undefined here
    if (res.status === 401) {
      this.props.history.push("/login");
      return Promise.reject("Unauthorized.");
    } else {
      return res;
    }
  });
}

export const get = url => request("GET", url);
export const post = (url, body) => request("POST", url, body);
export const put = (url, body) => request("PUT", url, body);
export const del = (url, body) => request("DELETE", url, body);

Если res.status === 401.Я надеюсь, что моя программа может вернуться к логину.Однако this.props в моей функции всегда неопределен.Как я могу связать это с конкретным компонентом?

Answer 1

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

По сути, вам нужно написать компонент, который послевызывается для рендеринга, запускает функцию выборки.В качестве компонента вы можете воспользоваться функцией withRouter из react-router или react-router-dom.Затем используйте:

export default withRouter(component-name)

Итак, каждый раз, когда вызывается этот компонент, this.props.history становится доступным, как и другие реквизиты.Вы также можете передать любые другие реквизиты тегу JSX.

Вот как это должно выглядеть:

class TryComponent extends Component {

    myFetchFunction() {
        //this.props.history is available
        //call request, get, delete... function here and pass props
    }

    render() {
        // call here or call from the constructor
        this.myFetchFunction();

        return <AnyJSX></AnyJSX>;
    }
}

export default withRouter(TryComponent);

Поэтому, когда вы пишете <TryComponent foo="bar" />, foo доступен как реквизити история также доступна в качестве реквизита.

Answer 2

Я бы порекомендовал не пытаться делать что-либо реагировать в вашей внешней функции request ().

Вместо этого прямо сейчас ваша функция request () возвращает что-то, поэтому везде, где она вызывается (в реакциикомпонент, скорее всего), вы сможете связать .then () на него.

Таким образом, в пределах реактивного компонента, где он используется:

import { get } from '...'

ReactComponent extends Component {

  classMethodToMakeRequest() {
    get('someurl.com').then(() => this.props.history.push('/push/route'))
  }

}

У вас будет доступ только к this.props из реактивного компонента.