คำแนะนำแบบอะซิงโครนัสพร้อมดีบาวซ์

แทนที่จะกรองอาร์เรย์ภายในเครื่อง ให้เรียกจุดปลายทางของส่วนติดต่อโปรแกรมประยุกต์ซึ่งส่งคำแนะนำที่ตรงกับคำค้นหากลับมา การเรียกส่วนติดต่อโปรแกรมประยุกต์ควรอยู่ใน useEffect ที่ขึ้นต่อค่าป้อนข้อมูลซึ่งผ่านการหน่วงแล้ว วิธีนี้ย้ายหน้าที่กรองไปให้เซิร์ฟเวอร์ ทำให้รองรับการจับคู่แบบคลุมเครือ การจัดอันดับ และคำแนะนำจากชุดข้อมูลที่มีขนาดใหญ่กว่ามาก

เพิ่มตัวแปรสถานะใหม่สองตัวให้ระบบเติมข้อความอัตโนมัติ ได้แก่ isLoading ซึ่งเป็นค่าบูลีนสำหรับแสดงตัวหมุนขณะการเรียกข้อมูลกำลังดำเนินอยู่ และ error ซึ่งเป็นสตริงหรือค่าว่างสำหรับแสดงข้อความข้อผิดพลาดเมื่อการเรียกข้อมูลล้มเหลว สิ่งเหล่านี้ช่วยให้ผู้ใช้ทราบความคืบหน้าของการทำงานแบบไม่พร้อมกัน แทนที่จะปล่อยให้สงสัยว่าเหตุใดคำแนะนำจึงไม่ปรากฏ

ใน useEffect สำหรับการเรียกข้อมูล ให้ตั้งค่า setIsLoading(true) และ setError(null) ตอนเริ่มต้น จากนั้นเรียก fetch(url) แยกวิเคราะห์ JSON เรียก setSuggestions(data) และสุดท้ายตั้งค่า setIsLoading(false) ในบล็อกที่ทำงานขั้นสุดท้าย หรือหลังจากเส้นทางทั้งที่สำเร็จและเกิดข้อผิดพลาดเสร็จสิ้น อาร์เรย์การขึ้นต่อของเอฟเฟกต์ควรมีเพียง debouncedInputValue

สร้าง AbortController ใหม่ที่ด้านบนของเอฟเฟกต์ และส่ง controller.signal ไปยังตัวเลือกของการเรียกข้อมูล ในฟังก์ชันล้างข้อมูล ให้เรียก controller.abort() เมื่อผู้ใช้พิมพ์และค่าที่ผ่านการหน่วงเปลี่ยนแปลง การเรียกข้อมูลก่อนหน้าจะถูกยกเลิกก่อนเริ่มการเรียกใหม่ จึงป้องกันไม่ให้ผลลัพธ์เก่ามาถึงผิดลำดับ

เมื่อการเรียกข้อมูลถูกยกเลิก การเรียกนั้นจะถูกปฏิเสธพร้อมกับ DOMException ที่มีชื่อเป็น AbortError ในบล็อกดักจับข้อผิดพลาด ให้ตรวจสอบ if (err.name === 'AbortError') return; เพื่อข้ามการเรียกข้อมูลที่ถูกยกเลิกไปอย่างเงียบ ๆ ควรจัดการเฉพาะข้อผิดพลาดของเครือข่ายหรือข้อผิดพลาดจากส่วนติดต่อโปรแกรมประยุกต์ที่แท้จริงและควรแสดงให้ผู้ใช้เห็น

ตั้งค่า isLoading เป็น true ก่อนการเรียกข้อมูล และเป็น false หลังจากการเรียกข้อมูลเสร็จสมบูรณ์หรือถูกปฏิเสธ ใช้บล็อกที่ทำงานในขั้นสุดท้ายเพื่อให้แน่ใจว่าสถานะจะถูกตั้งกลับเสมอ: fetch(url).then(...).catch(...).finally(() => setIsLoading(false)) หากไม่มีบล็อกนี้ ข้อผิดพลาดจากการเรียกข้อมูลจะทำให้ตัวหมุนทำงานค้างตลอดไป

เมื่อ isLoading เป็นค่า true และช่องป้อนข้อมูลมีข้อความ ให้แสดงรายการแบบเลื่อนลงพร้อมตัวหมุนที่อยู่ตรงกลางแทนรายการคำแนะนำ วิธีนี้บอกผู้ใช้ว่าผลลัพธ์กำลังจะมา เมื่อการโหลดเสร็จสิ้นและมีคำแนะนำเข้ามาแล้ว ให้เปลี่ยนตัวหมุนเป็นรายการคำแนะนำจริง

เมื่อ error ไม่ใช่ค่าว่าง ให้แสดงรายการแบบเลื่อนลงพร้อมข้อความข้อผิดพลาดแทนคำแนะนำ ข้อความอย่าง "ไม่สามารถโหลดคำแนะนำได้ โปรดลองอีกครั้ง" เป็นมิตรต่อผู้ใช้มากกว่าสตริงข้อผิดพลาดดิบ และคุณอาจเพิ่มปุ่มลองใหม่เพื่อเรียกข้อมูลอีกครั้งด้วยตนเอง

หลีกเลี่ยงการเรียกข้อมูลสำหรับสตริงว่างหรือคำค้นหาที่สั้นเกินไปจนได้ผลลัพธ์ที่ไม่เกี่ยวข้องจำนวนมาก ให้ตรวจสอบตั้งแต่ต้นเอฟเฟกต์: if (debouncedInputValue.length < 2) { setSuggestions([]); return; } วิธีนี้ลดการเรียกส่วนติดต่อโปรแกรมประยุกต์ที่ไม่จำเป็น และป้องกันไม่ให้ผลลัพธ์จำนวนมากเกินไปปรากฏจากอักขระเพียงตัวเดียว

เก็บผลลัพธ์ที่เรียกมาไว้ใน Map ผ่าน useRef: const cache = useRef(new Map()) ก่อนเรียกข้อมูล ให้ตรวจสอบ if (cache.current.has(query)) { setSuggestions(cache.current.get(query)); return; } หลังจากเรียกข้อมูลสำเร็จ ให้เก็บผลลัพธ์นั้นไว้ วิธีนี้ตัดการขอข้อมูลผ่านเครือข่ายซ้ำสำหรับคำค้นหาที่ผู้ใช้เคยพิมพ์แล้ว

สำหรับระบบเติมข้อความอัตโนมัติโดยเฉพาะ ระยะเวลาหน่วง 200-300 มิลลิวินาทีเหมาะสมที่สุด ระยะเวลาที่สั้นกว่านี้ (ต่ำกว่า 200 มิลลิวินาที) จะกระตุ้นคำขอมากเกินไปสำหรับผู้ที่พิมพ์เร็ว ส่วนระยะเวลาที่ยาวกว่านี้ (มากกว่า 400 มิลลิวินาที) จะทำให้คำแนะนำดูช้าและไม่ตอบสนอง 250 มิลลิวินาทีเป็นค่าเริ่มต้นที่นิยมใช้ในระบบเติมข้อความอัตโนมัติที่ใช้งานจริง

แทนที่การกรองแบบคงที่ด้วยการเรียกข้อมูลจากส่วนติดต่อโปรแกรมประยุกต์ภายใน useEffect ที่ขึ้นต่อค่าซึ่งผ่านการหน่วง ใช้ AbortController เพื่อยกเลิกคำขอเก่า เพิ่มสถานะ isLoading และ error เพื่อให้ข้อมูลแก่ผู้ใช้ กำหนดเกณฑ์จำนวนอักขระขั้นต่ำเพื่อหลีกเลี่ยงการเรียกข้อมูลมากเกินไป และแคชผลลัพธ์ไว้ในรีฟเพื่อข้ามคำขอผ่านเครือข่ายที่ซ้ำกัน