小道具が子コンポーネントに渡されていない

Question

私は質問コンポーネントに状態を渡そうとしています。なんらかの理由で、州だけが渡されることはありません。私はそれが私が行方不明だと明らかに何かであると確信していますが、私はこの1つの目の別のセットを使用することができます。ありがとう！あなたがquestions = this.state.questions;を行うと

import React from 'react'; 
import Question from './Question'; 
import firebase from 'firebase'; 

var questions = [{ qtext : "", options: [], id:0, answer: ""}, { qtext : "", options: [], id:1, answer: "" }]; 

const QuizBuilderForm = React.createClass({ 
    getInitialState: function() { 
     return { 
      questions 
     }; 
    }, 
    addQuestion: function(questions, id) { 
     questions = this.state.questions; 
     questions.push({ qtext : "", options: [], id: this.state.questions.length }); 
     this.setState({ 
      questions: questions 
     }); 
    }, 
    handleSubmit: function(event) { 
     event.preventDefault(); 
     console.log(this.state.questions); 
     this.firebaseRef = firebase.database().ref('quizzes'); 
     this.firebaseRef.push({ 
     question: this.state.questions 
    }); 
     this.refs.form.reset(); 
     this.setState({ 
      question: [{ qtext : "", options:[], id: 0, answer: ""}, {qtext: "", options:[], id: 1, answer: ""}] 
     }); 
    }, 
    render: function() { 
     {this.state.questions.map((question, index) => { 
      <Question {...this.props} key={index} index={index} question={question} /> 
      console.log(question); 
     } 
    )}; 
     return (
      <form className="quiz-form" onSubmit={this.handleSubmit} ref="form"> 
       <Question /> 
       <button type="button" className="add-question" onClick= {this.addQuestion} disabled={this.state.questions.length === 5}>{this.state.questions.length < 5 ? 'Add another question' : 'Question limit reached!'}</button> 
       <button type="submit">Create Quiz</button> 
      </form>  
     ); 
    } 
}); 

export default QuizBuilderForm; 

Answer 1

あなたはそのためのコンポーネントの状態に更新をトリガいない、それをクローニングしない、オブジェクトを参照しています。私は通常、この部分にロダッシュを使用します。questions = _.cloneDeep(this.state.questions);

renderも正しく表示されません。このバージョンを試してみてください。

render: function() { 
    var questions = this.state.questions.map((question, index) => { 
     <Question {...this.props} key={index} index={index} question={question} /> 
     console.log(question); 
    }); 

    return (
     <form className="quiz-form" onSubmit={this.handleSubmit} ref="form"> 
      {questions} 
      <button type="button" className="add-question" onClick= {this.addQuestion} disabled={this.state.questions.length === 5}>{this.state.questions.length < 5 ? 'Add another question' : 'Question limit reached!'}</button> 
      <button type="submit">Create Quiz</button> 
     </form>  
    ); 
}