瞭解React.js中的搜索過濾工作原理

我是新來做出反應的。我已經開始學習昨天了，我正在嘗試使用pokemon API（https://pokeapi.co/）製作一個簡單的Web應用程序，用戶可以通過名稱搜索小寵物並按類型過濾。瞭解React.js中的搜索過濾工作原理

對於搜索，我的想法是在用戶在搜索框中查詢時輸入口袋妖怪數據數組。我不明白的是，反應的生命週期。

看來我必須在我的搜索框輸入內容後立即更新過濾數組。這與反應組分的生命週期有什麼關係？換句話說，這個更新生命週期的哪一部分必須在？

我不是要求一個代碼，但我想了解如何開始編程。

感謝

2017-10-10 user6792790

最重要的是要明白的是爲組件的狀態生命週期 - 一旦你有如何工作的，然後一個很好的瞭解，你會看到它是完美的你想達到的目標。每次你修改一個組件狀態時（例如，每當一個字符輸入到一個被搜索的寵物小精靈的輸入字段中時），React就會調用這個組件的render（）{}方法。新修改的狀態對象可用於渲染函數內部的任何函數（在你的情況下就像是過濾器函數）或方法等，並且該概念將允許您根據與這些狀態對象一起操作的任何函數返回JSX組件作爲參數。

所以基本上我想像這樣： 1.如果狀態中沒有過濾器的字符串，加載所有的pokemon，否則用字符串過濾pokemon的列表，並返回過濾的列表。 2.當在輸入字段中鍵入內容時，使用該值更新狀態中的過濾器。 3.渲染方法被調用，循環會重複。

來源

2017-10-10 04:40:10 JobiWon9178

非常感謝！我仍然不是100％清楚，但我認爲我有這種感覺。所以，當我嘗試從API中檢索口袋妖怪列表時，是否實際上必須循環訪問API並將它們放入數組中，或者每次在搜索中使用關鍵字時，我們是否需要爲更改後的數據請求API盒子的變化？ – user6792790

反應生命週期的另一部分，也是我用來從外部來源提取數據的最重要部分，它是componentWillMount（）{}函數。這將是組件正式掛載之前調用的第一件事，並且會讓您在其中設置狀態。這樣，您就可以從API中獲取所需的任何內容，並將其存儲在狀態對象中。我認爲限制對外部資源的調用通常是一個好主意，所以如果你一次完成api調用，將它作爲一個數組存儲在狀態中，然後在你需要的時候再參考它以保持良好狀態。 – JobiWon9178

那麼，這聽起來是對你有效的方法嗎？：1）從componentWillMount（）中的API中獲取數據，2）創建一個數組，存儲其中所有小寵物的信息，3）使用給定數據的一些排序和篩選選項在render（）中呈現此數據。還不是很清楚。 – user6792790

瞭解React.js中的搜索過濾工作原理

回答

相關問題