React перехватывает массив, указывающий c проблема со структурой

Question

У меня есть указанный массив c с вопросами из базы данных. Я не знаю, сколько вопросов находится в массиве, поэтому я создал структуру с функцией map для элемента

<Fragment>
  <div className="paddingSection">
    <h1 className="large text-primary">Form Questions</h1>
    <form className="form" onSubmit={(e) => onSubmit(e)}>
      {form.questions.map((el, index) => (
        <Fragment key={index}>
          <div className="form-group">
            <label>{el}</label>
            <input
              type="text"
              placeholder={form.questions[index]}
              name={index}
              required
              onChange={(e) => onChange(e)}
            />
          </div>
        </Fragment>
      ))}
      <input type="submit" className="btn btn-primary my-1" />
    </form>
  </div>
</Fragment>

Теперь мне нужно получить ответы на вопросы и отправить их в базу данных в элементе массива. Но я не знаю, как сделать это правильно. Я написал, что:

const [answer, setAnswer] = useState('');
const [formData, setFormData] = useState([]);
const onChange = (e) => {
  //taken from actuall input
  setAnswer(e.target.value, answer);
  //table of all elements
  setFormData([answer, ...formData]);
};
const onSubmit = (e) => {
  e.preventDefault();
  addResponseToForm(match.params.company, match.params.id, formData, history);
};

Но я получаю что-то вроде этого: 7: "write" 8: "writ" 9: "wri" 10: "wr" 11: "w"

Я понимаю, что я получаю ответ в режиме реального времени, но как принять окончательный ответ на простой вопрос

Answer 1

Попробуйте следующее как быстрое решение (, хотя больше информации о том, что вы хотите выполнить, sh может получить лучшие предложения )

• onChange и onSubmit может быть передан непосредственно в форму, и входные данные
• form.questions[index] совпадают с el, поэтому используйте внутри l oop
• answer, setAnswer полезно в этом случае, так как вы не знаете, когда пользователь закончил печатать
• , вы можете использовать name (, так как это индекс ) input для нацеливания на индекс массив formData, если вы этого хотите.

const [formData, setFormData] = useState([]);
const onChange = (e) => {
  setFormData((data) => {
    const updatedData = [...data];
    updatedDate[e.target.name] = e.target.value;
    return updatedData;
  });
};
const onSubmit = (e) => {
  e.preventDefault();
  addResponseToForm(match.params.company, match.params.id, formData, history);
};

<Fragment>
  <div className="paddingSection">
    <h1 className="large text-primary">Form Questions</h1>
    <form className="form" onSubmit={onSubmit}>
      {form.questions.map((el, index) => (
        <Fragment key={index}>
          <div className="form-group">
            <label>{el}</label>
            <input
              type="text"
              placeholder={el}
              name={index}
              required
              onChange={onChange}
            />
          </div>
        </Fragment>
      ))}
      <input type="submit" className="btn btn-primary my-1" />
    </form>
  </div>
</Fragment>

Answer 2

Ни один из этих ответов не работал, но я изменил некоторые части и работает отлично.

 const [formData, setFormData] = useState([]);
 const onChange = (e) => {
   setAnswer({ ...answer, [e.target.name]: e.target.value });
   setFormData([answer, ...formData]);
 };

 const onSubmit = (e) => {
   e.preventDefault();
   let arr = Object.values(formData[0]);
   addResponseToForm(match.params.company, match.params.id, arr, history);
 };

Answer 3

setAnswer() должен принимать один аргумент, либо новое значение, либо функцию. Я вижу, вы передаете 2 параметра.

//taken from actuall input
setAnswer(e.target.value, answer);

В этом случае answer на самом деле является предыдущим значением этой переменной состояния. Простое исправление для вашего сценария может состоять в том, чтобы просто заменить setAnswer(e.target.value, answer); на setAnswer(e.target.value);.

. В отдельном примечании есть несколько вещей, которые могут прояснить дальнейшие заблуждения:

• Использование answer и formData представляется излишним.

• onChange={(e) => onChange(e)} можно заменить на onChange={onChange}. событие передается автоматически.

• Использование index в качестве key приведет к повторным клавишам и ненужным повторным визуализациям.

Дайте мне знать, если вам нужна дополнительная помощь. Я рад помочь.

Ура! 10