亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何將 ReactJS 中的應用狀態傳遞給后端?

如何將 ReactJS 中的應用狀態傳遞給后端?

慕工程0101907 2022-09-29 16:48:55
我正在使用 ReactJS 開發一個 Web 應用程序,在其中我創建了一個窗體,并將所有輸入字段的值存儲到應用程序的狀態中。也就是說,我的 App.js 文件的狀態包含在 Form.js 文件中創建的所有輸入字段的值。我希望將存儲在狀態中的信息傳遞到后端,以便我可以基于它處理數據集。如何添加功能,以便在單擊提交按鈕時,處于應用狀態的所有內容都將傳遞到后端 - 例如文本文件或 json 文件中?;旧?,我想根據用戶在表單中提供的信息(使用ReactJS)搜索數據集(使用彈性搜索)。我是 React 的新手,所以我沒有太多的知識。我已經制作了Web應用程序,但我需要有關如何將通過表單獲得的信息傳遞到后端的建議,以便我可以做進一步的工作。
查看完整描述

4 回答

?
千巷貓影

TA貢獻1829條經驗 獲得超7個贊

如何添加功能,以便在單擊提交按鈕時,處于應用狀態的所有內容都將傳遞到后端 - 例如文本文件或 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存儲庫


查看完整回答
反對 回復 2022-09-29
?
拉莫斯之舞

TA貢獻1820條經驗 獲得超10個贊

您需要研究制作XHR或使用獲取API(或axio)向后端API發出http請求。


查看完整回答
反對 回復 2022-09-29
?
慕絲7291255

TA貢獻1859條經驗 獲得超6個贊

您可能希望使用 MDN 中記錄的獲取 API。它處理網址請求,包括通過HTTP解析數據的REST API,例如 JSON對象等。


查看完整回答
反對 回復 2022-09-29
?
繁花如伊

TA貢獻2012條經驗 獲得超12個贊

使用公理來調用您在后端定義的 api 網址。您可以在youtube上觀看簡短的教程以熟悉基礎知識。


查看完整回答
反對 回復 2022-09-29
  • 4 回答
  • 0 關注
  • 97 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號