时间戳

首页 > 解决方案 > React onClick 事件调用 API 两次

reactjs - React onClick 事件调用 API 两次

问题描述

我有一个简单的 React 组件、一个按钮和一个调用 API 端点的函数。当我单击按钮时，API 内部事件被调用两次。我在 stackoverflow 上阅读了很多帖子并尝试了所有帖子，但仍然有同样的问题。此外，即使我可以在 db 中为每个调用看到 2 条记录，但在 Google Dev 工具中仅显示 1 个已连接的 xhr 调用。

我已经尝试传递函数引用而不是函数本身，甚至通过 () => { } 调用函数，但结果相同。

<button type="button" onClick={ this.onSubmitForm }>Save</button>

onSubmitForm = (e) => {
    // e.preventDefault();

    const response = axios.post('http://localhost/util/index.php/api/record', {name: 'test'} );
    console.log(response) // Even this line is logged once in console ;

}

标签： reactjsevents

解决方案

既不是您的反应应用程序也不是 API，它是浏览器本身。看看这个https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

一个预检请求，让服务器知道在发出实际请求时将使用什么 HTTP 方法。

推荐阅读