英文:
How to handle POST request in reactjs?
问题
我有我的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请求使用React路由器，但难以处理POST请求。我该如何实现这一点？
英文:
I have my ReactJS app running in http://localhost:3000/. I am receiving below form data to my React page as a POST request
<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>
My react app should be able to handle this POST request and render the UI as below
<h1>{eid}</h1>
<h1>{did}</h1>
I am able to handle GET request using react router but struggling to handle POST request. How can I achieve this?
答案1
得分: 7
这是不可能的，如果你的React应用是静态的（不是服务器端渲染的）。当你向你的React应用发送一些POST请求时，nginx（或其他服务器）将不允许这种操作（你不能将POST请求发送到静态文件）。即使你绕过了这个限制，React脚本也不会从你的POST请求中获得任何数据，因为nginx将处理你的请求，并只返回一个包含React脚本的HTML。
英文:
That is not possible if your React app is static(not server side rendered).
When you send some POST request to your react app, nginx(or other server) will not allow that kind of action(you cannot post to static files)
Even if you bypass that restriction, react script will not have any data from your POST request, because nginx will process your request and return just a html with react script to you
答案2
得分: 0
这将不会像 PHP 那样工作，你需要有类似后端（Node.js 或 PHP 用于传递数据），甚至一些站点来接受请求。
英文:
It will not work like php.. you need to have something like backend (node or php to pass the data) or even some site to accept the request..
答案3
得分: -2
首先，您可能需要一些理论观点：
- 首先，您应该保存数据。
- 您将它们保存在状态中。
- 您在渲染的部分中显示它们。
要从 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',
})
})
希望这些信息对您有所帮助。
英文:
First, you need maybe some theoretical view:
https://pusher.com/tutorials/consume-restful-api-react
https://www.robinwieruch.de/react-hooks-fetch-data
- You should firstly save data
- You save them to the state
- You display them in the part where it is rendered
To download data from api (GET)- you don't do it directly in form - you only use either ComponentDidMount or 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);
});
To send data to api (POST)- It's complicated - you need information about client-server communication
Straight from the React docs:
fetch('https://mywebsite.com/endpoint/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
})
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论