Гэтсби только передает значение флажка в формы Netlify

Question

У меня есть массив флажков, и я хочу передать, какие флажки были выбраны для форм Netlify.

В настоящее время передается только одно из значений, вместо этого я хочу, чтобы все они были правильно переданы и отформатированы (запятая между ними). ​​

Мой флажок выглядит следующим образом, он проходит по данным извлекается из массива безголовой CMS и отображает все флажки как следует

 <fieldset>
    <legend>Inquery type</legend>
    {formData.radioButtons.map((node, index) => (
      <>
        <p>
          <label key={index}>
            <input
              type="checkbox"
              id={("inqueryType", index)}
              name="inqueryType"
              ref={register()}
              value={node}
              onChange={handleChange}
              key={(node, "checbox")}
            />
            {node}
          </label>
        </p>
      </>
    ))}
  </fieldset>

Моя функция handleChange выглядит следующим образом

  const handleChange = e => {
    if (e.target.type === "checkbox" && !e.target.checked) {
      setState(prev => ({ ...prev, [e.target.name]: e.target.value }))
    } else {
      setState({ ...state, [e.target.name]: e.target.value })
    }
  }

Я подозреваю, что моя ошибка в моем методе handleChange , но я не смог понять, почему он хранит только одно значение вместо всех. Любые идеи?

Мой onSubmit выглядит следующим образом

const onSubmit = (data, e) => {
    e.preventDefault()
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({
        "form-name": "contactGudcForm",
        ...state,
      }),
    })
      .then(response => {
        setFeedbackMsg(`Thanks for reaching out. I'll get back to you soon.`)
        reset()
        console.log(response)
      })
      .catch(error => {
        setFeedbackMsg(
          "Oops, something went wrong. The form could not be submitted."
        )
        console.log(error)
      })
  }

, а моя функция encude, бесстыдно украденная из StackOverflow, выглядит следующим образом

function encode(data) {
  return Object.keys(data)
    .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
    .join("&")
}

Это проект Gatsby, развертываемый в Netlify с использованием стандартные формы Netlify

Answer 1

Проблема в том, что ваши флажки имеют один и тот же атрибут name (inqueryType в вашем примере), поэтому они будут перезаписывать здесь:

const handleChange = e => {
  // ...
  setState(prev => ({ ...prev, [e.target.name]: e.target.value }))
  // ...
}

Что происходит, если вы добавляете сформировать данные для ввода, используя входные данные 'name в качестве ключа. Поскольку у ваших флажков нет уникального name, он делает это:

const state = {}

// push the value of the first checkbox
state["inqueryType"] = "value 1"

// push the value of the second checkbox
state["inqueryType"] = "value 2"

// "value 1" is gone :(

Убедитесь, что ваши ключи уникальны, и с вами все будет в порядке!

Редактировать : как уже упоминалось в комментариях, вы можете отформатировать данные в любой форме, если хотите, чтобы они не перезаписывались. Если вам нужен строковый массив значений для вашей группы флажков, вы можете сделать что-то вроде этого:

const handleChange = e => {
  if (e.target.name === "inqueryType") {
    const inqueryType = [...state.inqueryType, e.target.value]
    setState({ ...state, inqueryType: JSON.stringify(inqueryType) })
  }
  else {
    setState({ ...state, [e.target.name]: e.target.value })
  }
}

Конечно, для вашего конкретного случая использования могут быть лучшие решения - эта часть зависит от вас: )