如何将 ReactJS 中的应用状态传递给后端？

Question

我正在使用 ReactJS 开发一个 Web 应用程序，在其中我创建了一个窗体，并将所有输入字段的值存储到应用程序的状态中。也就是说，我的 App.js 文件的状态包含在 Form.js 文件中创建的所有输入字段的值。我希望将存储在状态中的信息传递到后端，以便我可以基于它处理数据集。如何添加功能，以便在单击提交按钮时，处于应用状态的所有内容都将传递到后端 - 例如文本文件或 json 文件中。

基本上，我想根据用户在表单中提供的信息（使用ReactJS）搜索数据集（使用弹性搜索）。

我是 React 的新手，所以我没有太多的知识。我已经制作了Web应用程序，但我需要有关如何将通过表单获得的信息传递到后端的建议，以便我可以做进一步的工作。

Answer 1

如何添加功能，以便在单击提交按钮时，处于应用状态的所有内容都将传递到后端 - 例如文本文件或 json 文件中。您可以使用 Axios 或获取 API 请求在应用程序中使用的数据。您可以使用两种最流行的方法（称为 Axios（基于承诺的 HTTP 客户端）和提取 API（浏览器内置的 Web API））来使用 REST API。获取（） API 是一种内置的 JavaScript 方法，用于从服务器或 API 端点获取资源。它类似于 XML 请求Axios 是一个易于使用的基于承诺的 HTTP 客户端，适用于浏览器和节点.js。由于 Axios 是基于承诺的，我们可以利用异步并等待更多可读性和异步代码。借助 Axios，我们获得了拦截和取消请求的能力，它还具有内置功能，可提供客户端保护，防止跨站点请求伪造。要了解更多信息，您可以参考此以上这两种方法，都可以用于将数据从前端提交到后端，以便将数据存储到后端，然后您可以根据需要对其执行多个操作。您可以参考多个博客和文档来了解更多信息：使用公理从 ReactJS 中的 API 中获取数据用于开机自检请求的获取 API阿克西奥斯公理和获取 API 之间的区别最近，我还创建了一个应用程序，其中我将 React 与弹簧靴应用程序集成。在此应用程序中。我已经设置了路由器和路由，创建并提交了表单，称为获取，发布，PUT，使用axios删除请求（也完成了获取API）。submitBook= event =>{event.preventDefault();const book = {         title:  this.state.title,         author: this.state.author,         coverphotoURL: this.state.coverphotoURL,         isbnNumber: this.state.isbnNumber,         price: this.state.price,         language: this.state.language};const headers = new Headers();headers.append("Content-Type", "application/json");fetch("http://localhost:8080/rest/books",{method:"POST",body:JSON.stringify(book),headers}).then(response => response.json()).then((book) => {if(book){this.setState({"show":true, "method":"post"});setTimeout(() => this.setState({"show":false}),3000);}else{this.setState({"show":false});}});this.setState(this.initialState);};要查看完整代码，您可以参考我的Github存储库

Answer 2

您需要研究制作XHR或使用获取API（或axio）向后端API发出http请求。

Answer 3

您可能希望使用 MDN 中记录的获取 API。它处理网址请求，包括通过HTTP解析数据的REST API，例如 JSON对象等。

Answer 4

使用公理来调用您在后端定义的 api 网址。您可以在youtube上观看简短的教程以熟悉基础知识。