useActionState และ useFormStatus

useActionState(action, initialState) คือฮุกของรีแอ็กต์ 19 ที่ครอบแอ็กชันฝั่งเซิร์ฟเวอร์เพื่อติดตามสถานะของแอ็กชันระหว่างการส่งข้อมูล ฮุกนี้รับฟังก์ชันแอ็กชันและค่าเริ่มต้นของสถานะ แล้วส่งคืนทูเพิลที่คุณใช้ควบคุมประสบการณ์ของแบบฟอร์มทั้งหมดได้

ฮุกนี้ส่งคืน [state, formAction, isPending] โดย state จะเก็บค่าที่แอ็กชันส่งคืนล่าสุด ซึ่งเริ่มต้นเป็น null หรือค่าเริ่มต้นที่คุณกำหนด ส่วน formAction คือแอ็กชันที่ถูกครอบไว้สำหรับส่งต่อให้แบบฟอร์ม และ isPending จะเป็น true ขณะที่แอ็กชันกำลังทำงานบนเซิร์ฟเวอร์

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

หากแอ็กชันฝั่งเซิร์ฟเวอร์ส่งคืน { errors: { email: 'Invalid email' } } คุณสามารถแสดงข้อผิดพลาดในตำแหน่งนั้นได้ดังนี้: {state.errors?.email && <p>{state.errors.email}</p>} เนื่องจากสถานะยังคงอยู่ระหว่างการแสดงผลใหม่ ข้อความข้อผิดพลาดจึงยังคงแสดงจนกว่าการส่งข้อมูลครั้งถัดไปจะสำเร็จและแทนที่สถานะเดิม

เมื่อแอ็กชันส่งคืน { success: true } คอมโพเนนต์ก็สามารถแสดงข้อความสำเร็จได้ดังนี้: {state?.success && <p>Form submitted!</p>} คุณสามารถซ่อนแบบฟอร์มหรือแทนที่ด้วยข้อความสำเร็จแบบมีเงื่อนไขตามค่าของสถานะได้

useFormStatus() คือฮุกที่อ่านสถานะรอดำเนินการขององค์ประกอบ <form> บรรพบุรุษที่ใกล้ที่สุด ฮุกนี้ส่งคืนอ็อบเจ็กต์ที่มีค่า { pending: boolean } อยู่ด้วย ฮุกนี้ต้องใช้ภายในคอมโพเนนต์ที่เป็นลูกของแบบฟอร์ม ไม่ใช่ในคอมโพเนนต์ที่แสดงผลแบบฟอร์มเอง

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

รูปแบบมาตรฐานคือแยกปุ่มส่งไปไว้ในคอมโพเนนต์ของตัวเอง: function SubmitButton() { const { pending } = useFormStatus(); return <button disabled={pending}>Submit</button>; } จากนั้นวางคอมโพเนนต์นี้ไว้ภายในแบบฟอร์ม เพื่อให้เข้าถึงสถานะรอดำเนินการของแบบฟอร์มได้

การกำหนด disabled={pending} ให้กับปุ่มส่งจะป้องกันการส่งข้อมูลซ้ำ เมื่อผู้ใช้คลิกส่งและแอ็กชันฝั่งเซิร์ฟเวอร์กำลังทำงาน pending จะเป็น true ปุ่มจะถูกปิดใช้งานและไม่สามารถคลิกได้ เมื่อแอ็กชันทำงานเสร็จ pending จะกลับเป็น false และปุ่มจะเปิดใช้งานอีกครั้ง

รูปแบบประสบการณ์ผู้ใช้ของแบบฟอร์มที่สมบูรณ์จะใช้ฮุกทั้งสองร่วมกัน โดย useActionState ในคอมโพเนนต์แบบฟอร์มจะติดตามผลลัพธ์ของแอ็กชันและจัดเตรียม formAction ขณะที่ useFormStatus ภายในคอมโพเนนต์ลูก SubmitButton จะติดตามสถานะรอดำเนินการ ฮุกทั้งสองร่วมกันช่วยให้แสดงข้อผิดพลาดจากการตรวจสอบและจัดเตรียมปุ่มส่งที่ตอบสนองได้ดี

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

ต้องเรียกใช้ useFormStatus ที่ใดจึงจะทำงานได้อย่างถูกต้อง

useActionState(action, initialState) ส่งคืน [state, formAction, isPending] เพื่อติดตามผลลัพธ์ของแอ็กชันฝั่งเซิร์ฟเวอร์ สถานะจะเก็บค่าที่แอ็กชันส่งคืน ทำให้แสดงข้อผิดพลาดและข้อความสำเร็จในตำแหน่งนั้นได้ useFormStatus() จัดเตรียมค่า { pending } ภายในคอมโพเนนต์ลูกของแบบฟอร์ม ทำให้สร้างปุ่มส่งที่ตอบสนองได้ดี ฮุกทั้งสองทำงานร่วมกันเพื่อสร้างประสบการณ์การใช้แบบฟอร์มที่สมบูรณ์และเข้าถึงได้