（一）全棧（react配置/https支持/useState多組件傳遞/表單提交/React Query/axois封裝/Router）

文章目錄

  • 項目地址
  • 一、基礎配置
    • 1.1 支持https
      • 1. 安裝所需要的包
      • 2. 配置
    • 1.2 常用
      • 1. 字符串拼接
  • 二、組件
    • 2.1 useState組件傳遞
      • 1. App里初始化useState
      • 2. useState和方法的傳遞
      • 3. 接收傳遞來的狀態和方法
    • 2.2 表單提交
      • 1. 表單組件處理用戶輸入數據
      • 2. App傳來的submitForm方法
    • 2.3 React Query
      • 1. 安裝和引入
      • 2. 使用Query進行管理
      • 3. 自定義hook
      • 4. useMutation 處理 增/刪/改
      • 5. 傳遞參數查詢返回結果
    • 2.5 axois封裝
      • 1. 添加后端地址的配置
      • 2. 創建agent
    • 2.6 路由
      • 1. 創建路由
      • 2. 使用路由
      • 3. 表單殘留問題
    • 2.7 自定義組件
      • 1. 自定義組件和原生組件
      • 2. 自定義組件

項目地址

  • 教程作者：
  • 教程地址：
https://www.udemy.com/course/complete-guide-to-building-an-app-with-net-core-and-react/learn/lecture/48500157#overview
  • 代碼倉庫地址：
  • 所用到的框架和插件：
dbt 
airflow

一、基礎配置

1.1 支持https

1. 安裝所需要的包

 npm install -D vite-plugin-mkcert

2. 配置

在這里插入圖片描述

1.2 常用

1. 字符串拼接

在這里插入圖片描述

二、組件

2.1 useState組件傳遞

定義useState的地方，必須和更改State的方法定義在一個地方

1. App里初始化useState

  • 在App里初始化了useState的狀態以及各種方法

在這里插入圖片描述

2. useState和方法的傳遞

  • 將useState的狀態和方法傳遞給其他組件，哪里定義useState，就在哪里傳遞方法給
  • 在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/91773.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/91773.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/91773.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

【abc417】E - A Path in A Dictionary

【abc417】E - A Path in A Dictionary

Problem StatementYou are given a simple connected undirected graph G with N vertices and M edges. The vertices of G are numbered vertex 1, vertex 2, …, vertex N, and the i-th (1≤i≤M) edge connects vertices Ui? and Vi?.Find the lexicographically smalle…
閱讀更多...
linux火焰圖

linux火焰圖

火焰圖簡介火焰圖是一種性能分析的可視化工具，它將CPU的調用棧（Call Stack）信息以矩形火焰的形式展現出來。Y軸：代表調用棧的深度（函數A調用了函數B，B就疊在A上面）。X軸：代表CPU的抽…
閱讀更多...
解剖 .NET 經典：從 Component 到 BackgroundWorker

解剖 .NET 經典：從 Component 到 BackgroundWorker

1?? 背景與定位在 .NET Framework 2.0 時代，微軟引入了 BackgroundWorker 來解決 WinForm/WPF 場景下“耗時操作阻塞 UI 線程”的問題；而 Component 早在 1.0 就已存在，是所有可視化/非可視化設計器的“基類”。理解這兩者的源碼與機制&…
閱讀更多...
桌面端界面設計 |貨物 TMS 系統 - SaaS UI UX 設計：審美積累之境

桌面端界面設計 |貨物 TMS 系統 - SaaS UI UX 設計：審美積累之境

在物流數字化的浪潮中，貨物 TMS 系統的 SaaS 化與 UI/UX 設計正構建著獨特的審美坐標系。這不僅是技術與功能的融合，更是一場關于效率美學的深度探索，為行業審美積累注入了鮮活的實踐樣本。SaaS 模式賦予貨物 TMS 系統輕盈而強大的特質&#…
閱讀更多...
多架構鏡像整合全攻略：在Docker中實現單一鏡像支持同時支持amd64和arm64架構

多架構鏡像整合全攻略：在Docker中實現單一鏡像支持同時支持amd64和arm64架構

多架構支持的挑戰 ：隨著異構計算（如 ARM、x86、RISC-V 等）的普及，開發者需要為不同硬件平臺提供對應的鏡像，傳統方式需維護多個版本（如 image:v1-amd64 和 image:v1-arm64 ），導致版本…
閱讀更多...
Linux730 tr:-d /-s；sort:-r,-n,-R,-o,-t,-k,-u；bash；cut:-d,-c；tee -a；uniq -c -i

Linux730 tr:-d /-s；sort:-r,-n,-R,-o,-t,-k,-u；bash；cut:-d,-c；tee -a；uniq -c -i

回顧 sort sort [選項] 文件-u：唯一，去除重復 -r:按數字大小，倒序排序，大到小 -o:輸出文件 -n:按數字大小，順序排序，小到大 -t: -t后加分割符，按分割符為標準，進行篩選 -k:k后加數字…
閱讀更多...
力扣457:環形數組是否存在循環

力扣457:環形數組是否存在循環

力扣457:環形數組是否存在循環題目思路代碼題目 存在一個不含 0 的 環形 數組 nums ，每個 nums[i] 都表示位于下標 i 的角色應該向前或向后移動的下標個數： 如果 nums[i] 是正數，向前（下標遞增方向）移動 |nums[i]| 步…
閱讀更多...
在 Elasticsearch 中落地 Learning to Rank（LTR）

在 Elasticsearch 中落地 Learning to Rank（LTR）

1 為什么要引入 LTR？ 常規檢索（BM25、語義檢索、Hybrid、RRF …）往往只能基于少量信號（關鍵詞命中、向量相似度）排序。 Learning-to-Rank 通過機器學習模型把多維度特征（文檔屬性、查詢屬性、查詢-文檔相關…
閱讀更多...
Socket編程——TCP協議

Socket編程——TCP協議

文章目錄一、TCP傳輸二、相關接口三、多進程版本四、多線程版本一、TCP傳輸 TCP和UDP類似，但是在傳輸中TCP有輸入，輸出緩沖區，看下面的傳輸圖片 可以理解為TCP之間的數據傳輸都是依賴各自的socket，socket就充當傳輸的中介吧。 而…
閱讀更多...
GitHub使用小記——本地推送、外部拉取和分支重命名

GitHub使用小記——本地推送、外部拉取和分支重命名

GitHub 項目推送與拉取等操作使用隨記 本小記適用于個人項目或組織項目，涵蓋 GitHub 推送、拉取、分支管理、.gitignore 設置等常見需求。 1. 將已有本地工程推送至 GitHub 新倉庫 1.1 前提條件 本地項目結構完整，已準備好；本地已安裝 Git…
閱讀更多...
RabbitMQ 延時隊列插件安裝與使用詳解（基于 Delayed Message Plugin）

RabbitMQ 延時隊列插件安裝與使用詳解（基于 Delayed Message Plugin）

RabbitMQ 延時隊列插件安裝與使用詳解（基于 Delayed Message Plugin）📌 一、什么是 RabbitMQ 延時隊列？🚀 二、安裝前準備? RabbitMQ 環境要求🔧 三、安裝延時隊列插件🧩 插件名稱：…
閱讀更多...
Vue項目使用ssh2-sftp-client實現打包自動上傳到服務器（完整教程）

Vue項目使用ssh2-sftp-client實現打包自動上傳到服務器（完整教程）

告別手動拖拽上傳！本教程將手把手教你如何通過ssh2-sftp-client實現Vue項目打包后自動上傳到服務器，提升部署效率300%。🚀一、需求場景與解決方案在Vue項目開發中，每次執行npm run build后都需要手動將dist目錄上傳到服務器&#…
閱讀更多...
《質光相濟：Three.js中3D視覺的底層交互邏輯》

《質光相濟：Three.js中3D視覺的底層交互邏輯》

在Three.js搭建的虛擬維度中，光照與材質的關系遠非技術參數的簡單疊加，當光線以數字形態穿越虛空，與物體表面相遇的瞬間，便開始書寫屬于這個世界的物理敘事——每一縷光斑的形狀、每一塊陰影的濃淡、每一寸肌理的反光，都是對現實光學規律的轉譯與重構。理解這種交互的深層…
閱讀更多...
無刷電機在汽車領域的應用與驅動編程技術

無刷電機在汽車領域的應用與驅動編程技術

文章目錄引言一、核心應用場景1. 新能源汽車動力系統2. 底盤控制系統3. 車身與舒適系統4. 智能駕駛與安全系統二、無刷電機的技術優勢解析三、無刷電機驅動編程基礎1. 驅動原理2. 驅動架構四、核心控制算法與實現1. 六步換向法（梯形波控制）算法流程圖C語…
閱讀更多...
【游戲引擎之路】登神長階（十八）：3天制作Galgame引擎《Galplayer》——無敵之道心

【游戲引擎之路】登神長階（十八）：3天制作Galgame引擎《Galplayer》——無敵之道心

游戲引擎開發記錄：2024年 5月20日-6月4日：攻克2D物理引擎。 2024年 6月4日-6月13日：攻克《3D數學基礎》。 2024年 6月13日-6月20日：攻克《3D圖形教程》。 2024年 6月21日-6月22日：攻克《Raycasting游戲教程》。 2024年…
閱讀更多...
kotlin kmp 跨平臺環境使用sqldelight

kotlin kmp 跨平臺環境使用sqldelight

歡迎訪問我的主頁: https://heeheeaii.github.io/ 1. 項目結構 SQLDelightKMPDemo/ ├── shared/ │ ├── src/ │ │ ├── commonMain/kotlin/ │ │ ├── androidMain/kotlin/ │ │ ├── desktopMain/kotlin/ │ │ └── commonMain/sqldel…
閱讀更多...
機器學習【五】decision_making tree

機器學習【五】decision_making tree

決策樹是一種通過樹形結構進行數據分類或回歸的直觀算法，其核心是通過層級決策路徑模擬規則推理。主要算法包括：ID3算法基于信息熵和信息增益選擇劃分屬性；C4.5算法改進ID3，引入增益率和剪枝技術解決多值特征偏差；CART…
閱讀更多...
簡單記錄一下VSCode中的一些學習記

簡單記錄一下VSCode中的一些學習記

在剛開始學習VSCode時，相信大家都會好奇VSCode底部區域那幾個不同的狀態欄具體有什么作用（輸出、調試控制臺、終端、端口），貌似好像都是輸出與代碼相關的信息的？貌似代碼運行結果既可以出現在輸出中，也可以…
閱讀更多...
基于 Hadoop 生態圈的數據倉庫實踐 —— OLAP 與數據可視化（二）

基于 Hadoop 生態圈的數據倉庫實踐 —— OLAP 與數據可視化（二）

目錄 二、Hive、SparkSQL、Impala 比較 1. SparkSQL 簡介 2. Hive、SparkSQL、Impala 比較 （1）功能 （2）架構 （3）場景 3. Hive、SparkSQL、Impala 性能對比 （1）cloudera 公司…
閱讀更多...
C++：std::array vs 原生數組 vs std::vector

C++：std::array vs 原生數組 vs std::vector

📌 C：std::array vs 原生數組 vs std::vector 引用： C/C 標準庫 std::vector、std::array、原生靜態數組 的區別有哪些？ 深度剖析：std::vector 內存機制與 push_back 擴容策略 今天過去了 還有許許多個明天 能和大…
閱讀更多...
最新文章

Copyright @ 2022~2023