Requisiten werden nicht an die untergeordnete Komponente übergeben

Question

Also ich versuche, den Status zu einer Frage-Komponente zu übergeben. Aus irgendeinem Grund wird der Staat einfach nicht weitergegeben. Ich bin sicher, es ist etwas Offensichtliches, dass ich vermisse, aber ich könnte einen anderen Satz von Augen zu diesem Thema verwenden. Vielen Dank!

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

Wenn Sie das tun questions = this.state.questions; Sie das Objekt verweisen, ist es nicht das Klonen, also nicht auf den Zustand der Komponente ein Update auslösen. Ich verwende normalerweise lodash für diesen Teil, und tun questions = _.cloneDeep(this.state.questions);

Auch Ihre render sieht nicht richtig aus. Versuchen Sie diese Version.

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>  
    ); 
}