Question

我有一个表格，提交后必须执行2个任务：

将表单数据发送到服务器
重定向到另一个页面

我很难使这两种情况同时发生；第一个可以使用<Form action='/blabla'>轻松完成，但是随后我得到了一个空白页，其中包含了服务器端返回的信息作为文本。使用<Form onSubmit={handleSubmit}>和以下功能可以轻松实现第二个目标：

const handleSubmit = (e) => {
    e.preventDefault()
    fetch('/blabla', {method: 'POST'})
    .then(res => res.json())
    .then(data => {
        history.push('/nextPage')
    })
    .catch(error => {
        alert(error)
    })
}

它工作正常，但没有数据从表单发送到服务器：（

那么，有人可以向我解释一下如何完成上述两项任务吗？在此先感谢：）

Answer 1

如果您也可以发布该信息，将会更加清楚。
无论如何，仅从片段中我就说您的提取配置中没有body字段，例如：

    fetch('/blabla', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json' // or 'application/x-www-form-urlencoded'
      },
      body: JSON.stringify(data), // adjust this according to Content-Type header
    })

这可能是没有数据发送到服务器的原因。

反应提交表单然后重定向问题

1 个答案: