ทำ search ข้อมูลด้วยใช้ useState ลองเปลี่ยนใช้ useQueryParams ดีไหม

 

เนื้อหานี้เป็นเนื้อหา React JS (เพื่อคนไม่รู้)

use-query-params คืออะไร
use-query-params เป็น hook React ที่ช่วยให้คุณเข้าถึงพารามิเตอร์ของ URL ในปัจจุบัน สามารถใช้เพื่อรับค่าพารามิเตอร์เดี่ยวหรือทั้งหมด และสามารถใช้เพื่อกรองผลลัพธ์จาก API หรือฐานข้อมูล

 
วิธีใช้ use-query-params
ในการใช้ use-query-params คุณจะต้องนำเข้าลงในโค้ดของคุณ จากนั้นคุณสามารถใช้เพื่อเข้าถึงพารามิเตอร์ของ URL ในปัจจุบัน ตัวอย่างเช่น โค้ดต่อไปนี้จะรับค่าพารามิเตอร์ "page" จาก URL ในปัจจุบัน:

const page = useQueryParams("page");

คุณสามารถใช้ use-query-params
เพื่อรับค่าพารามิเตอร์ทั้งหมดได้อีกด้วย ตัวอย่างเช่น โค้ดต่อไปนี้จะรับค่าพารามิเตอร์ทั้งหมดจาก URL ในปัจจุบัน:

const queryParams = useQueryParams();

วิธีใช้ use-query-params เพื่อกรองผลลัพธ์จาก API หรือฐานข้อมูล คุณสามารถใช้ use-query-params เพื่อกรองผลลัพธ์จาก API หรือฐานข้อมูล
ตัวอย่างเช่น โค้ดต่อไปนี้จะกรองรายการผลิตภัณฑ์ตามค่าพารามิเตอร์ "page" จาก URL ในปัจจุบัน:

const products = useQuery( ({ page }) => { return fetch(`/products?page=${page}`) .then(response => response.json()) .catch(error => console.error(error)); }, { page: 1 } );

ข้อดีของการใช้ use-query-params
มีบางข้อดีของการใช้ use-query-params ต่อไปนี้คือบางส่วน:

• ใช้งานง่าย 
• มีประสิทธิภาพ 
• สนับสนุน SEO 

สรุป use-query-params เป็น hook React ที่มีประโยชน์ซึ่งช่วยให้คุณเข้าถึงพารามิเตอร์ของ URL ในปัจจุบัน สามารถใช้เพื่อรับค่าพารามิเตอร์เดี่ยวหรือทั้งหมด และสามารถใช้เพื่อกรองผลลัพธ์จาก API หรือฐานข้อมูล การใช้ use-query-params นั้นง่ายและมีประสิทธิภาพ และสนับสนุน SEO