未捕获的类型错误:无法读取未定义的属性“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