如何将 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上观看简短的教程以熟悉基础知识。