setState内循环 - 反应

Question

我想在反应中建立一个问卷。现在，我所有的答案都将被使用文本框接受。这些将会通过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> 
    ); 
    } 
} 

此外，PARAMS是一个数组，而不是一个哈希now.I无法弄清楚怎么回事设置初始状态我的问题。代码可能真的很脏，但我只能做到这一点呢。

我可能不会让自己变得非常清楚，所以善待我并放下评论，这样我可以帮助你更好地理解我想要的。任何改变和建议都会很棒。感谢提前:)

--UPDATE--

我最终采取丹尼尔的意见，并把文本框在另一个反应的组分，并要求其在父之一。

此外，我省略循环内的整个国家的东西，并与this.props向前移动。我更新了子组件中的text box's状态（QuestionaireComponent），并在使用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。