循环内的 setState - React

Question

我正在尝试在 React 中构建问卷。现在，我的所有答案都将使用文本框接受。然后这些将使用 ajax 调用发送到我的 api。我希望我的参数具有以下结构，

questionnaire: {
                {question: "question", answer: "answer"},
                {question: "question2", answer: "answer2"},
                {question: "question3", answer: "answer3"}
               }

到目前为止，我的代码确实很混乱，但不知何故我得到了想要的结果。但是，我无法更新我的答案状态并继续获取 Uncaught TypeError: Cannot read property 'setState' of undefined

import React, { PropTypes } from 'react'
import ReactDOM from 'react-dom';
import SubmitButton from '../components/SubmitButton'

export default class QuestionaireContainer extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = { q: this.props.data,
                   questionaire: [],
                 };
  }
  componentDidMount() {
    var q = this.state.q
    var questionaire = this.state.questionaire
    q.map(function(map){
      questionaire.push({"id": map.id,
                         "question": map.question,
                         "answer": '',
                        });
    })
    this.setState({questionaire: questionaire})
  }

  submit(e){
    e.preventDefault();
    var data = {
      questionaires: this.state.questionaire
    }
    $.ajax({
      type: "GET",
      url: "/questionaries/save_questions",
      data: data,
      dataType: 'JSON',
      success: ()=>{
        alert("hello")
      }
    })
  }


  render() {
    var questionNodes = this.state.questionaire.map(function(question){

      var updateTextBox = (e) => {
      console.log(question.answer);
      this.setState({"answer": e.target.value});
      }

      return (
        <li key={question.id}>
          <div className="box-sed">
            <div className="que-set registration question-type">
              <span className="icon-ahead">
                <i aria-hidden="true" className="fa fa-question-circle"></i>
              </span>
              <h2>{question.question}</h2>
              <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500's, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            </div>
            <div className="registration question-type">
              <input type="text" placeholder="Type answer" className="input-text" value={question.answer} onChange={updateTextBox} />
            </div>
          </div>
        </li>
      );
    });
    return (
      <div className="question">
        <form onSubmit={this.submit.bind(this)}>
          <ul>
          {questionNodes}
          </ul>
          <SubmitButton/>
        </form>
      </div>
    );
  }
}

此外，参数是数组而不是散列 now.I 无法弄清楚还有什么方法可以用我的问题设置初始状态。代码可能真的很脏，但我只能做到这一点。

我可能不会说得很清楚，所以请耐心等待并发表评论，这样我可以帮助您更好地理解我想要什么。任何更改和建议都会很棒。提前致谢:)

--更新--

我最终采纳了 Daniel 的建议，将文本框放在另一个 React 组件中，并在父组件中调用它。

此外，我 省略了循环内的整个状态，并使用 this.props 向前推进。我更新了子组件 (QuestionaireComponent) 中的 text box's 状态，并使用 refs.

在父组件 QuestionaireContainer 中使用了它的状态

以下是让我工作的最终代码：

QuestionaireContainer.jsx

import React, { PropTypes } from 'react'
import ReactDOM from 'react-dom';
import SubmitButton from '../components/SubmitButton'
import QuestionaireComponent from '../components/QuestionaireComponent'

export default class QuestionaireContainer extends React.Component {

  submit(e){
    e.preventDefault();
    var data = {
      questionaires: []
    }
    this.props.data.map(map => {
      data.questionaires.push(this.refs[map.id].state)
    });
    console.log(data);
    console.log("Done");
  }
  render() {
    var questionNodes = this.props.data.map(questions => {
      return (
        <QuestionaireComponent question={questions.question} key={questions.id} id = {questions.id} ref={questions.id}/>
      );
    });
    return (
      <div className="question">
        <form onSubmit={this.submit.bind(this)}>
          <ul>
          {questionNodes}
          </ul>
          <SubmitButton/>
        </form>
      </div>
    );
  }
}

和QuestionaireComponent.jsx

import React, {PropTypes} from 'react'    
export default class QuestionaireComponent extends React.Component {
  static propTypes = {
    question: PropTypes.string.isRequired,
  };
  constructor(props) {
    super(props);
    this.state = { answer: '',
                   question: this.props.question,
                   id: this.props.id,
                 };
  }
  updateTextBox = (e) => {
    this.setState({answer: e.target.value})
  }
  render() {
    return (
      <li>
        <div className="box-sed">
          <div className="que-set registration question-type">
            <span className="icon-ahead">
              <i aria-hidden="true" className="fa fa-question-circle"></i>
            </span>
            <h2>{this.state.question}</h2>
            <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500's, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
          </div>
          <div className="registration question-type">
            <input type="text" placeholder="Type answer" className="input-text" value={this.state.answer} onChange={this.updateTextBox} />
          </div>
        </div>
      </li>
    );
  }
}

希望这对正在寻找类似东西的人有所帮助。

Answer 1

改变这个：

var questionNodes = this.state.questionaire.map(function(question){

进入

var questionNodes = this.state.questionaire.map(question => {

因为在您的代码函数（问题）中覆盖了上下文变量 this。

循环内的 setState - React

setState inside a loop - React

ajax

state

reactjs

ruby-on-rails-5