POST форма для API с React

Question

Я использую Staticman ( staticman.net ) для комментариев на моем сайте Gatsby ( gatsbyjs.org ).

Я использую классическую форму HTMLс параметром method="POST" и action="https://api.staticman.net/...", поскольку это то, что ожидает Staticman ( документы ).

Однако я хотел бы сделать это более "Реагировать", и я изменилдействие формы для handleSumbit() функции:

handleSubmit(event) {
  event.preventDefault()
  fetch("https://api.staticman.net/...", {
    method: "POST",
    body: event.target,
  })
}

Я чувствую, что это не работает, потому что API ожидает HTTP POST-запрос с application/x-www-form-urlencoded типом содержимоготогда как мой event.target - это форма с множеством информации React.

Как сделать так, чтобы мой запрос fetch() выглядел точно так же, как отправка формы HTTP POST?

Answer 1

После некоторых исследований я нашел решение . Вот моя handleSubmit функция:

handleSubmit = async (event) => {
  event.preventDefault()

  // extract form data
  const formdata = new FormData(event.target)

  // convert FormData to json object
  // SOURCE: https://stackoverflow.com/a/46774073
  const json = {}
  formdata.forEach(function(value, prop){
    json[prop] = value
  })

  // convert json to urlencoded query string
  // SOURCE: https://stackoverflow.com/a/37562814 (comments)
  const formBody = Object.keys(json).map(key => encodeURIComponent(key) + '=' + encodeURIComponent(json[key])).join('&')

  // POST the request to Staticman's API endpoint
  const response = await fetch("https://dev.staticman.net/v3/entry/github/robinmetral/eaudepoisson/master/comments", {
    method: "POST",
    headers: {"Content-Type": "application/x-www-form-urlencoded"},
    body: formBody,
  })
    .then(response => {
      // reset form
      document.getElementById("comment-form").reset()
      // display success message
      document.getElementById("success").style.display = "block"
    })
    .catch(error => {
      console.log(error)
      document.getElementById("failure").style.display = "block"
    })
}

Вот что он делает:

1. извлекает отправленные данные как FormData объект
2. преобразует FormData в объект JSON, используя фрагмент , найденный в SO
3. преобразует JSON в ожидаемый application/x-www-form-urlencoded тип содержимого или «строку запроса», используя другой фрагмент SO
4. отправляет запрос в конечную точку API, отлавливает ошибки и отображает сообщение об успехе

Возможно, это не единственное решение, и если вы видите что-то, что я могу улучшить, пожалуйста, дайте мне знать в комментариях или пришлите мне PR !

Answer 2

Я бы перестроил эти данные POST из состояния вашего компонента, используя что-то вроде query-string пакета. Не уверен в специфике staticman, но я предполагаю, что у вас есть значения форм в состоянии вашего реагирующего компонента, чтобы вы могли сделать что-то вроде:

handleSubmit = (event) => {
  event.preventDefault()
  fetch("https://api.staticman.net/...", {
    method: "POST",
    body: queryString.stringify({
      this.state.username,
      this.state.subject
    })
  })
}