开发者问题收集

未捕获的类型错误:无法读取未定义的属性“fetch”

2018-09-22
3022

我正在做一个示例 ReactJS 应用,尝试通过 RestAPI POST 发送表单数据。下面给出了代码片段,但它不起作用。

组件的 render() 如下所示。填写表单后,当用户单击“提交”按钮时,将调用“handleSubmit”。

render() {
    return(
    <button 
    label="Submit" 
    onClick={this.handleSubmit}>
    Submit
    </button>
}

“handleSubmit”的定义如下所示,错误信息为 “未捕获的 TypeError:无法读取未定义的属性‘fetch’”

handleSubmit() {

    this.fetch('https://example.domain.com/api/v1/task/actual', {
        method: 'POST',
        body: JSON.stringify({
            first_name: this.state.first_name,
            last_name: this.state.last_name
        })
        }).then(res => console.log('Success:', JSON.stringify(res)))
      .catch(error => console.error('Error:', error));
}

为了清楚起见,我也分享了 fetch 的定义。AccessToken 很好。它适用于其他组件。

fetch(url, options) {
        const accessToken = 'Bearer ' + auth.getAccessToken();
        const headers = {
            'Content-Type': 'application/json',
            'Authorization' : accessToken
        }
        return fetch(url, {
            headers,
            ...options
        })
  }

我遗漏了一些东西,我无法弄清楚。请提出建议。

3个回答

fetch 未定义的原因是 this 不是组件。如果您将 handleSubmit 函数定义更改为:

handleSubmit = () => {

那么您的代码应该可以正常工作。请注意,这可能需要更改您的转译设置。或者,您可以在构造函数中绑定 handleSubmit 函数,以便它具有正确的 this

Matt Way
2018-09-22

在构造函数中添加以下代码。

this.handleSubmit = this.handleSubmit.bind(this);

另一件事是确保此实例中存在 fetch 函数。该 fetch 在您的组件类中声明,或者如果您从某个外部文件导入它,请在构造函数中添加以下行。

this.fetch = fetch.bind(this);
Shubham Gupta
2018-09-22

React 文档中解释得相当清楚。请继续阅读。
https://reactjs.org/docs/handling-events.html

Aditya
2018-09-22