루프 내에서 setState - 반응

Question

반응에서 설문지를 작성하려고합니다. 지금은 텍스트 상자를 사용하여 모든 답변을 수락합니다. 이것들은 아약스 호출을 사용하여 내 API로 전송됩니다. 나는

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

내 코드는 지금까지 정말 지저분 내 PARAMS는 다음과 같은 구조를 갖고 싶어하지만 어떻게 든 내가 원하는 결과를 얻고있다. 그러나, 나는 내 대답의 상태를 업데이트하고 또한 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는 배열이 아닌 해시 초기 상태를 설정하는 방법을 다른 당장 문이 안 열려 그림 밖으로 내 질문들. 코드가 정말 더러울 수도 있지만 아직까지는이 작업을 수행 할 수 없었습니다.

나는 내 자신을 매우 친절하게 생각하지 않을 수 있으며, 친절하게도 나와 함께 감싸고 의견을 남기므로 내가 원하는 것을 더 잘 이해할 수 있도록 도와 줄 수 있습니다. 모든 변경 사항 및 제안 사항은 훌륭합니다. 미리 감사드립니다 :) 나는 다니엘의 조언을 복용 결국 다른 구성 요소를 반응에 텍스트 상자를 놓고 부모 하나라고 불렀다

--UPDATE--

.

또한 i 은 루프 내부의 전체 상태를 생략하고 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 우선합니다.