سلام آقای شیخ.
من به جای استفاده از useFormStatus که باهاش آشنایی ندارم برای ارسال فرم تماس با ما از formik و yup استفاده کردم اما خطای زیر رو دریافت می کنم :

Access to fetch at 'http://localhost:8000/api/contact-us' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

fetch.js:20 

 POST http://localhost:8000/api/contact-us net::ERR_FAILED

ContactForm.js:20 TypeError: Failed to fetch

    at postData (fetch.js:20:28)

    at handleSubmit (ContactForm.js:17:39)

    at onSubmit (ContactForm.js:34:31)

export const postData = async(url, body) => {

    const response = await fetch(`http://localhost:8000/api${url}`, {

        cache: "no-store",

        method: "POST",

        body: JSON.stringify(body),

        headers: {

            "Content-Type": "application/json",

            "Accept": "application/json"

        }

    });



    if (response.ok) {

        const data = await response.json();

        console.log(data);

    } else {

        throw new Error(`مشکلی پیش آمده ${response.status}`);

    }

}

"use client";



import { postData } from "@/utils/fetch";

import { ErrorMessage, Field, Form, Formik } from "formik";

import * as Yup from "yup";



export default function ContactForm() {

  const contactSchema = Yup.object().shape({

    name: Yup.string().max(20, "بیش از 20 کاراکتر مجاز نیست").required("نام الزامی است"),

    email: Yup.string().email("ایمیل نامعتبر است").required("ایمیل الزامی است"),

    subject: Yup.string().max(40, "بیش از 40 کاراکتر مجاز نیست").required("موضوع الزامی است"),

    text: Yup.string().required("متن الزامی است")

  });



  const handleSubmit = async (values) => {

    try {

        const request = await postData("/contact-us", values);

        alert("با موفقیت پست شد", request);

    } catch (err) {

        console.error(err);

    }

  }



  return (

    <div class="form_container">

    <Formik

        initialValues={{

            name: "",

            email: "",

            subject: "",

            text: ""

        }}

        validationSchema={contactSchema}

        onSubmit={(values) => handleSubmit(values)}

    >

    <Form>

        <div>

            <Field name="name" type="text" class="form-control" placeholder="نام و نام خانوادگی" />

            <ErrorMessage name="name" render={(message) => <small className="err-message">{message}</small>} />

        </div>

        <div>

            <Field name="email" type="email" class="form-control" placeholder="ایمیل" />

            <ErrorMessage name="email" render={(message) => <small className="err-message">{message}</small>} />

        </div>

        <div>

            <Field name="subject" type="text" class="form-control" placeholder="موضوع پیام" />

            <ErrorMessage name="subject" render={(message) => <small className="err-message">{message}</small> } />

        </div>

        <div>

            <Field name="text" as="textarea" rows="10" style={{height:"100px"}} class="form-control"

                placeholder="متن پیام"></Field>

            <ErrorMessage name="text" render={(message) => <small className="err-message">{message}</small> } />

        </div>

        <div class="btn_box">

            <button type="submit">ارسال</button>

        </div>

    </Form>

    </Formik>

    </div>

  );

}

سلام . وقت بخیر
در بخش فرم، می‌خواهم بگم که پس از ارسال فرم، مقادیر فرم باید پاک شوند. شما اشاره ای برای پاک کردن فرم نکردید. من یک id برای فرم تعیین کردم و از کد
document.getElementById("myForm").reset();
استفاده کردم. کامپوننت client هست و میخوام مطمئن بشم که در هوک useEffect کار درستی انجام دادم که از getElementById استفاده کردم؟
وقتی که فرم رو پر میکنم و دکمه ارسال رو میزنم اطلاعات فرم با موفقیت در سرور ذخیره میشه و فرم reset میشه و در قسمت log هم هیچ اروری نمیبینم.

export default function ContactForm() {

  const [state, formAction] = useFormState(addPost, {});

  useEffect(() => {

    if (state?.status === "error") {

      toast.error(state.message);

    } else {

      toast.success(state.message);

      document.getElementById("myForm").reset();

    }

  }, [state]);