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。