React Forms Обновление вложенного объекта состояния - восстановление объекта состояния из ввода

Question

Я искал документацию по реакции, а также несколько вопросов здесь и в этой статье, но я не совсем понимаю, как выполнить эту задачу.https://goshakkk.name/array-form-inputs/

Я пытаюсь перебрать вложенный объект состояния в приложении реагирования.Вопросы представляют собой массив объектов, каждый из которых имеет заголовок, описание и параметры.

questions:   [
        {
          title:       'EKG',
          description: 'EKG changes affect risk',
          options:     [
            {
              value:       '1',
              description: 'ST Wave changes'
            }
          ],
        }

Сейчас я просто работаю со значением заголовка, прежде чем работать со всем объектом.

Я пытаюсь создать средство обновления событий для формы редактирования / новой, но у меня возникают проблемы при объединении объекта вопроса в состояние обновления.Вот моя форма:

      {this.state.questions.map((q, i) => (
        <div>
          <label>Question {i+1 + '.'}</label>

          <input
            type="text"
            placeholder={`Question #${i+1}`}
            name="title"
            defaultValue={q.title}
            onChange={this.handleQuestionChange(i)}
          />
          <button type="button" className="small">-</button>
        </div>
        )
      )}

А вот мой обновитель:

handleQuestionChange = (i) => (e) => {
    console.log(e.target.name, e.target.value, i)
    let stateCopy = Object.assign({}, this.state)
    const name = e.target.name
    const questions = stateCopy.questions.map((question, j) => (
      j === i ?
         question[name] = e.target.value
      :
        question[name] = question[name]

    ))
    console.log(stateCopy.questions, questions)
    stateCopy.questions = questions
    this.setState({questions: stateCopy.questions})
  }

он прекрасно обрабатывает первое обновление, но, поскольку мой условный оператор if в обработчике раздавливает объект в одинполе, 2-е обновление создает ошибку.Я думал, что вопрос [имя] обновит пару ключ: значение, но он вернет NAN, так что я в конечном итоге с этим при записи в состояние вопроса до и после:

{title: "EKG", description: "EKG changes affect risk", options: Array(1), NaN: "EKG4"}

меняя обработчик на это, я получаюближе ... по крайней мере возвращает объект, но я не могу получить доступ к имени переменной из e.target.value динамически:

const questions = stateCopy.questions.map((question, j) => (
  j === i ?
     question[name] = {question: {name: e.target.value}}
  :
    question[name] = {question: {name: name}}

))

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

{name: "EKGn"}

Есть советы?Я понимаю, что это может быть скорее вопросом манипулирования javascript / Object, чем вопросом о реакции, но я пробовал несколько вариантов, включая использование строкового литерального синтаксиса ES6 для динамического имени, и он все еще не работает.х: вопрос

Answer 1

Проблема была в функции .map.Я публикую здесь рабочий код, на случай, если он кому-нибудь поможет.Я не уверен, что такое этикет для ответа на ваш собственный вопрос.

  const questions = stateCopy.questions.map((question, j) => {
      if (j === i ) question[name] = e.target.value;
      return question;
    })