Пытаюсь остаться на странице после отправки: «Не удалось получить» (для написания формы использовался машинописный текст)

Насколько я могу судить, это должно работать, логика интерфейса кажется в порядке. Я думаю, вам нужно проверить URL-адрес, по которому вы публикуете. Несколько вещей, на которые стоит обратить внимание

Все, что вам нужно, чтобы предотвратить перенаправление, — это вызвать preventDefault при событии отправки. Итак, у вас есть event.preventDefault(), и это отлично работает.

В остальном мне не удалось повторить вашу ошибку, "Failed to fetch". Я сделал повтор с вашим кодом на https://replit.com/@maxmezzomo/Form-Submit. Я просто удалил ранний возврат и оповещение о капче, тоже не думаю, что в этом проблема.

Однако вы отправляете сообщение на https://submit-form.com/formid, который возвращает 404 с сообщением «Эта форма больше не существует». Даже из браузера вы получите то же самое, если щелкнете ссылку. Я бы сказал, что это ожидаемое поведение. Но это встроено в failed to fetch. Я просто думаю, что вам действительно нужен идентификатор, если вы хотите публиковать сообщения, например https://submit-form.com/<formid>, где formid — это место, где вы хотите публиковать сообщения.

Если у вас есть URL-адрес, указывающий на URL-адрес, ожидаемый сервером, вы сможете сделать свой запрос. Кажется, что в Formspark конечная точка ожидает следующие заголовки https://documentation.formspark.io/examples/ajax.html#axios-with-recaptcha-v2.

headers: {
  "Content-Type": "application/json",
  Accept: "application/json",
},

как только вы добавите их, я думаю, это должно сработать, вы, вероятно, захотите, чтобы полезная нагрузка также была json, чтобы вы могли сделать что-то вроде

JSON.stringify(Object.fromEntries(Object.entries(formData)))

который должен предоставить json объекта с данными формы, то, что вам понадобится, зависит от того, чего ожидает API, но вы можете это изучить.

Обновил реплит этим, вроде работает, получаю 200.

Итак, теперь ответ имеет код 200, что означает, что данные формы были успешно отправлены. Но есть часть кода, которая все еще выдает ошибку, которая обнаруживается позже. Вы не можете использовать событие currentTarget после обработки события. Я не знаю, как именно оно работает, но, вероятно, поскольку оно асинхронно к моменту обработки события. ответ на запрос currentTarget имеет значение null. Поэтому простой способ — создать ссылку на цель, прежде чем делать запрос.

  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    const target = event.currentTarget;

    event.preventDefault()
    if (!token) {...

затем вы можете использовать эту переменную для вызова сброса.

Теперь пользовательский интерфейс также должен показывать, что форма успешно отправлена!

Все проблемы были связаны с действием моей формы при отправке. По сути, основная проблема заключалась в том, что я не добавил правильные заголовки (Content-type и Accept) внутри «const response = ...», которые Formspark ожидал от моей формы, что немного смущает. Вторая проблема (с которой я не столкнулся, но в конечном итоге столкнулась с ней) заключается в том, что я не использовал formData как простой объект, а также не строкировал его. И последняя проблема заключалась в том, чтобы не использовать константное значение для сброса(), если ответ был в порядке, и если вы не используете константу для представления currentTarget, это приведет к ошибке.

Вот как это должно было выглядеть:

/* Other lines of code that have remained unchanged.*/

const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
        const target = event.currentTarget

        event.preventDefault()
        if (!token) {
            // You don't need to include this if you are not using captcha
            // alert("Please verify that you are human.")
            // return
        }

        const formData = new FormData(event.currentTarget)
        const formDataObject = Object.fromEntries(formData.entries())
        console.info("Form Data: ", formDataObject)

        try {
            const response = await fetch("https://submit-form.com/form-id", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    Accept: "application/json",
                },
                body: JSON.stringify(formDataObject),
            })
            console.info({ response })
            const responseData = await response.json()
            console.info({ responseData })
            if (response.ok) {
                setMessage("Form successfully submitted!")
                setIsSuccess(true)
                target.reset()
            } else {
                const errorText = await response.text()
                console.error("Error response: ", errorText)
                setMessage(
                    "There was a problem with your submission: " + errorText
                )
                setIsSuccess(false)
            }
        } catch (error) {
            console.error("Submission error: ", error)
            setMessage(
                "There was an error submitting the form: " + error.message
            )
            setIsSuccess(false)
        }
    }
/* Other lines of code that have remained unchanged.*/

Большое спасибо Мистеру Максу