useActionState dan useFormStatus

useActionState(action, initialState) ialah cangkuk React 19 yang membungkus Tindakan Pelayan untuk menjejaki keadaannya merentas penghantaran. Cangkuk ini menerima fungsi tindakan dan nilai keadaan awal, kemudian mengembalikan tupel yang boleh Anda gunakan untuk mengendalikan keseluruhan pengalaman borang.

Cangkuk ini mengembalikan [state, formAction, isPending]. state menyimpan nilai pulangan tindakan yang paling terkini, bermula dengan null atau nilai awal Anda. formAction ialah tindakan yang dibungkus untuk dihantar kepada borang. isPending bernilai true semasa tindakan sedang dilaksanakan pada pelayan.

Setiap kali borang dihantar, Tindakan Pelayan dijalankan dan nilai pulangannya menjadi state baharu. Pada paparan pertama, state sama dengan initialState. Hal ini memudahkan Anda memaparkan antara muka yang berbeza bergantung pada sama ada terdapat penghantaran terdahulu dan hasil yang dikembalikannya.

Jika Tindakan Pelayan mengembalikan { errors: { email: 'Invalid email' } }, Anda boleh memaparkan ralat secara sebaris: {state.errors?.email && <p>{state.errors.email}</p>}. Oleh sebab keadaan dikekalkan merentas pemaparan semula, mesej ralat kekal kelihatan sehingga penghantaran seterusnya yang berjaya menggantikan keadaan tersebut.

Apabila tindakan mengembalikan { success: true }, komponen boleh memaparkan mesej kejayaan: {state?.success && <p>Form submitted!</p>}. Borang boleh disembunyikan secara bersyarat atau digantikan dengan mesej kejayaan berdasarkan nilai keadaan.

useFormStatus() ialah cangkuk yang membaca keadaan menunggu bagi elemen <form> leluhur terdekat. Cangkuk ini mengembalikan objek yang merangkumi { pending: boolean }. Cangkuk ini mesti digunakan di dalam komponen yang merupakan anak kepada borang — bukan dalam komponen yang memaparkan borang itu sendiri.

Sekatan bahawa useFormStatus mesti digunakan di dalam borang wujud kerana cangkuk tersebut membaca konteks borang daripada pepohon React di atasnya. Jika dipanggil dalam komponen yang sama yang memaparkan borang, cangkuk itu akan menjadi saudara kepada borang, bukannya keturunan, dan tidak akan mempunyai akses kepada keadaan borang.

Corak standardnya ialah mengasingkan butang hantar ke dalam komponennya sendiri: function SubmitButton() { const { pending } = useFormStatus(); return <button disabled={pending}>Submit</button>; }. Komponen ini kemudiannya diletakkan di dalam borang, supaya komponen tersebut mempunyai akses kepada keadaan menunggu borang.

Menetapkan disabled={pending} pada butang hantar menghalang penghantaran berganda. Apabila pengguna mengklik hantar dan Tindakan Pelayan sedang dilaksanakan, pending bernilai true, lalu butang menjadi dilumpuhkan dan tidak boleh diklik. Apabila tindakan selesai, pending kembali kepada false dan butang diaktifkan semula.

Corak pengalaman pengguna borang yang lengkap menggabungkan kedua-dua cangkuk: useActionState dalam komponen borang menjejaki hasil tindakan dan menyediakan formAction, manakala useFormStatus di dalam komponen anak SubmitButton menjejaki keadaan menunggu. Bersama-sama, kedua-duanya menyediakan paparan ralat yang disahkan dan butang hantar yang responsif.

Untuk pengalaman yang lebih responsif, useOptimistic digandingkan dengan useActionState. Anda mengemas kini antara muka dengan hasil yang dijangka serta-merta sebelum pelayan memberikan respons, kemudian menyelaraskannya semula apabila respons sebenar tiba. Corak ini biasa digunakan dalam butang suka, senarai tugasan dan interaksi lain yang memerlukan maklum balas pantas.

useActionState(action, initialState) mengembalikan [state, formAction, isPending] untuk menjejaki hasil Tindakan Pelayan. Keadaan menyimpan nilai pulangan tindakan, sekali gus membolehkan paparan ralat dan kejayaan secara sebaris. useFormStatus() menyediakan { pending } di dalam komponen anak borang, lalu membolehkan butang hantar yang responsif. Kedua-dua cangkuk ini bersama-sama menghasilkan pengalaman borang yang lengkap dan mudah diakses.