嗨，所有這些問題都是更少的代碼，更多的邏輯。
我正在構建一個應用程式，我可以在其中過濾不同的作業型別并獲取有關每個角色的資訊。雖然我在資料庫中有資訊，但我希望用戶進入，搜索并過濾它 - 幾乎就像 Glassdoor。
例如，用戶在搜索欄位中輸入“軟體工程師”欄位，處理此請求的最佳方式是什么？
- 使用 useEffect 鉤子保存輸入，并使用 axios 在 get 請求中通過鍵查詢資料庫？語法會是什么樣子？我的資料如下所示：
{ "title": "Software Engineer", "desc": "加入我們的軟體工程航班團隊，他們管理網站內航空公司內容的 API 集成和聚合。您將與我們的產品所有者、經理和 UX 密切合作團隊使用最先進的分銷 API 促進國內和國際航空公司的銷售和商品推銷。”，“公司”：“Robert Half”，“位置”：“墨爾本”，“任務”：[“敏捷：至少使用 .Net 和其他語言的敏捷環境中的商業經驗，但更重要的是有強烈的學習和開發不止一種語言的愿望”，“可以為復雜問題提供簡單的解決方案：撰寫可測驗、有效和可交流的代碼”，“成長心態：你對你的作業充滿好奇和熱情，喜歡學習新事物”、“不僅僅是編碼員：你對整體業務環境感興趣并創造出色的用戶體驗”、“在 Docker 和 Docker 編排系統（K8S、DC/作業系統等）”]，“技能”：[“React”，“Angular”，“AWS”，“GCP”，“Azure”]，“薪水”：“96000”，“風格”：“全職” ，“狀態”：“真”}“AWS”、“GCP”、“Azure”]、“salary”：“96000”、“style”：“全職”、“status”：“true”}“AWS”、“GCP”、“Azure”]、“salary”：“96000”、“style”：“全職”、“status”：“true”}
真的，我只是不確定將此功能連接到我的后端呼叫的最佳方法。我已經建立并構建了一個 API 來創建/獲取有關這些角色的資訊，但我不確定如何連接它！
我在這里使用 MERN 堆疊，并建立了我的檔案夾結構。一切似乎都只是不確定。
現在我有一個這樣的組件：
const InitialSearch_INPUT = () => {
return (
<LeftContainer>
<InteriorLeftContainer>
<Typography variant="h4" color="primary">Let's start searching</Typography>
</InteriorLeftContainer>
<InteriorLeftSearchContainer>
<InteriorLeftSearchBar>
<SearchBar
placeholder="Roles..."
autoFocus
cancelOnEscape
/>
</InteriorLeftSearchBar>
</InteriorLeftSearchContainer>
</LeftContainer>
);
}
export default InitialSearch_INPUT
請告訴我。
uj5u.com熱心網友回復：
當涉及到搜索時，最好的方法之一是在您的輸入上設定onChange 事件并觸發 API 呼叫，但我們不想發送太多請求（這會損害服務器回應時間）所以我們必須 使用Debouce實際上是確保 clinet 輸入了他想要的文本，并在定義的時間（例如 500 毫秒）后開始搜索。
隨著那個beign說看看下面的例子
export const debounce = (func, delay) => {
let debounceTimer;
return function () {
const context = this;
const args = arguments;
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => func.apply(context, args), delay);
};
};
const doSearch = debounce(function (value) {
setState({...state,page:0,queryStrings:value});
}, DebounceTime);
考慮有這個輸入
<Input placeholder="search" value={search[headCell.id]} onChange={(e)=>{doSearch(headCell.id,e)}}
inputProps={{ 'aria-label': 'description' }} />
我希望你明白這一點。
uj5u.com熱心網友回復：
查看我關于將 React 應用程式連接到后端的博文：https ://schneider-lukas.com/blog/react-connect-rest-api 。那應該讓你開始。
此外，對于使用表單，我強烈推薦該react-hook-form庫：https ://react-hook-form.com/ 。使用這個庫，您可以獲得用戶輸入，然后您可以使用您的 API 服務進一步處理這些輸入。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/414728.html
標籤：