Question

我正在做一个示例ReactJS App，在这里我试图通过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
        })
  }

我错过了一些东西，但无法弄清楚。请告知。

Answer 1

未定义访存的原因是因为this不是组件。如果将handleSubmit函数定义更改为：

handleSubmit = () => {

然后您的代码应该可以工作。请注意，这可能需要更改转码设置。另外，您可以在构造函数中绑定handleSubmit函数，以使其具有正确的this。

Answer 2

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

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

另一件事是确保此实例中存在提取功能。该提取是在您的组件类中声明的，或者如果您从某个外部文件导入该提取，则还应在构造函数中添加以下行。

this.fetch = fetch.bind(this);

Answer 3

在React文档中很好地解释了。继续阅读。
https://reactjs.org/docs/handling-events.html

未捕获的TypeError：无法读取未定义的属性“获取”

3 个答案: