我的 ReactJS 应用程序在 http://localhost:3000/ 中运行。我将以下表单数据作为 POST 请求接收到我的 React 页面
<form action="http://localhost:3000/" method="post">
Employee Id: <input type="text" name="eid"><br>
Department Id: <input type="text" name="did"><br>
<input type="submit" value="Submit">
</form>
我的 react 应用应该能够处理这个 POST 请求并呈现如下的 UI
<h1>{eid}</h1>
<h1>{did}</h1>
我能够使用反应路由器处理 GET 请求，但难以处理 POST 请求。我怎样才能做到这一点？
【问题讨论】：
标签： reactjs react-router
如果你的 React 应用是静态的（不是服务器端渲染的），这是不可能的。 当您向您的反应应用程序发送一些 POST 请求时，nginx（或其他服务器）将不允许这种操作（您不能发布到静态文件） 即使你绕过了这个限制，react 脚本也不会从你的 POST 请求中获取任何数据，因为 nginx 会处理你的请求并只返回一个带有 react 脚本的 html 给你
【讨论】：
它不会像 php 那样工作。你需要有后端（节点或 php 来传递数据）甚至一些站点来接受请求。
【讨论】：
首先，您可能需要一些理论观点：
https://pusher.com/tutorials/consume-restful-api-react
https://www.robinwieruch.de/react-hooks-fetch-data
要从 api (GET) 下载数据 - 您不直接在表单中进行 - 您只使用 ComponentDidMount 或 UseEffect .
componentDidMount() {
fetch(ApiURL)
.then(res => res.json())
.then(res => this.setState({ planets: res }))
.catch(() => this.setState({ hasErrors: true }));
}
useEffect(async () => {
const result = await axios(
ApiURL,
);
setData(result.data);
});
要将数据发送到 api (POST)- 这很复杂 - 您需要有关 客户端-服务器 通信的信息
直接来自 React 文档：
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
})
【讨论】：