Axios 发布请求不适用于使用 ReactJS 的事件

Question

在过去一周左右的时间里一直很卡，找不到我的问题的任何答案。今天我开始做一些适当的调查。触发事件时，Axios 似乎无法正常工作。这在我的主 PC 上也不起作用，这让我认为这实际上是 Axios 的一个错误。

我已经试过了：

• 独立重新安装 Axios
• 卸载我拥有的所有全局依赖项
• 创建一个新的 React 应用程序
• 检查正在触发的事件（它们是）
• 检查我的网络标签（没有显示）

我的 post 请求在作为函数调用时工作正常：

import React from "react";
import axios from "axios";
import "./App.css";

function App() {
  const makeRequest = () => {
    axios.post("http://localhost:5000");
  };

  makeRequest();

  return <div className="app"></div>;
}

export default App;

后端输出：There was a post request!

但是，我的代码在使用事件时不起作用，这适用于 onClick 和 onSubmit（这就是我已经测试过的）：

import React from "react";
import axios from "axios";
import "./App.css";

function App() {
  const makeRequest = () => {
    axios.post("http://localhost:5000");
  };

  return (
    <div className="app">
      <button onClick={makeRequest}>Post Request</button>
    </div>
  );
}

export default App;

没有后端输出或前端输出。非常感谢您的帮助！

编辑：我忘了提到的是fetch 工作得非常好，但我真的宁愿尽可能使用 Axios。

Answer 1

将您的 const 更改为一个函数并使用对象传递方法调用它。

import React from "react";
import axios from "axios";
import "./App.css";

function App() {
  function makeRequest (){
    axios.post("http://localhost:5000");
  };

  return (
    <div className="app">
      <button onClick={() => makeRequest()}>Post Request</button>
    </div>
  );
}

export default App;

Answer 2

尝试添加更多的 console.log 调用以从前端获取更多调试数据 - 它可以帮助解决问题。

import React from "react";
import axios from "axios";
import "./styles.css";

export default function App() {
  const makeRequest = () => {
    const result = axios
      .post("https://jsonplaceholder.typicode.com/users")
      .then((result) => {
        console.log("Result", result);
      })
      .catch((error) => console.error("Error", error))
      .finally(() => console.log("Request has been made"));
    console.log("Result should be a Promise object", result);
  };

  return (
    <div className="app">
      <button onClick={makeRequest}>Post Request</button>
    </div>
  );
}

上面的代码 sn-p 工作得很好。检查代码 sn -p here，并尝试在您的环境中运行它。如果控制台日志中的信息不会出现或者没有帮助 - 深入了解您用于转换 JSX 代码的环境和工具，构建 JS 并将该信息添加到问题中。可能问题隐藏在那里的某个地方。

Answer 3

请检查您的 react 应用程序 package.json 文件中是否有 "proxy": "localhost:5000"，这将允许 React 将 API 请求代理到使用 Express 构建的 Node.js 服务器。

5000是节点服务器端口。

Answer 4

问题是您正在传递函数而不是调用它。 我会尝试在 onClick 中使用箭头函数这样：

onclick={()=> makeRequest()}

Answer 5

我可以看到你没有用 () 调用函数，它应该是 makeRequest()