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语句将对象压缩到一个字段中，因此第二次更新会产生错误。我认为问题[name]会更新key：value对，但它会返回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语法作为动态名称，它仍然无法正常工作。 X：问题

Answer 1

问题出在.map函数中。我在这里发布了工作代码，以防它帮助其他人。我不确定礼仪是什么回答你自己的问题。

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

React Forms更新嵌套状态对象 - 从输入重建状态对象

1 个答案: