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

我建议您不要在您的外部request（）函数中进行任何反应。

相反，现在您的request（）函数正在返回某些内容，因此，无论在何处调用它（很可能在react组件中），您都可以将.then（）链接到其上。

因此在使用它的react组件中：

import { get } from '...'

ReactComponent extends Component {

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

}

您只能从React组件中访问this.props。

Answer 2

由于上面导出的函数不是组件，因此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可用作道具，历史记录也可用作道具。

外部提取功能中的this.props未定义

2 个答案: