エラー - Firebase.pushが失敗しました：

Question

私は、質問と関連オプションのコレクションをfirebase ref 'quizzes'にプッシュしようとしています。送信をクリックすると、コンソールで次のように表示されます。

Uncaught Error: Firebase.push failed: first argument contains an invalid key ($$typeof) in property 'quizzes.questions.0'. Keys must be non-empty strings and can't contain ".", "#", "$", "/", "[", or "]"

私は、この問題を解決する方法をここか、本当に何を意味するのか($$typeof)見当がつかない。私はオプションコンポーネントを質問コンポーネント配列[]にプッシュして、質問コンポーネントをQuizBuilderForm配列[]にプッシュします。

ありがとうございます！

は、ここで私はあなたのコードで見つける2つの主要な間違いがあります

// Quiz Builder Component 

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

const QuizBuilderForm = React.createClass({ 
    getInitialState: function() { 
     return { 
      questions: [], 
     }; 
    }, 
    addQuestion: function(questions, index) { 
     index = this.state.questions.length; 
     questions = this.state.questions; 
     questions.push(<Question key={index} id={index}/>); 
     index++; 
     this.setState({ 
      questions: questions 
     }); 
    }, 
    componentDidMount: function() { 
     this.addQuestion(); 
    }, 
    handleSubmit: function(event) { 
     event.preventDefault(); 
     this.firebaseRef = firebase.database().ref('quizzes'); 
     this.firebaseRef.push({ 
      questions: this.state.questions 
     }); 
     this.refs.form.reset(); 
     this.setState({ 
      questions: [] 
     }); 
    }, 
    render: function() { 
     return (
      <form className="quiz-form" onSubmit={this.handleSubmit} ref="form"> 
       {this.state.questions} 
       <button type="button" className="add-question" onClick={this.addQuestion}>Add a question</button> 
       <button type="submit">Create Quiz</button> 
      </form>  
     ); 
    } 
}); 

export default QuizBuilderForm; 

// Question Component 

import React from 'react'; 
import Option from './Option'; 

const Question = React.createClass({ 
    getInitialState: function() { 
     return { 
      value: "", 
      options: [] 
     }; 
    }, 
    handleChange: function(e) { 
     this.setState({ 
      value: e.target.value 
     }); 
    }, 
    addOption: function(options, index) { 
     index = this.state.options.length; 
     options = this.state.options; 
     options.push(<Option key={index} id={index} />); 
     index++; 
     this.setState({ 
      options: options 

     }); 
    }, 
    componentDidMount: function() { 
     this.addOption(); 
    }, 
    render: function() { 
     return (
      <div className="question"> 
       <input type="text" value={this.state.value} onChange={this.handleChange}></input> 
       {this.state.options} 
       <button type="button" onClick={this.addOption}>Add another option</button> 
      </div> 
     ); 
    } 
}); 

export default Question; 

// Options component 

import React from 'react'; 

const Option = React.createClass({ 
    getInitialState: function() { 
     return { 
      value: "" 
     }; 
    }, 
    handleChange: function(e) { 
     this.setState({ 
      value: e.target.value 
     }); 
    }, 
    render: function() { 
     return (
      <input type="text" value={this.state.value} placeholder="Enter an answer here" onChange={this.handleChange}></input>   
     ); 
    } 
}); 

export default Option; 

Answer 1

私のコードです。

1. リアクションコンポーネントをファイヤーベースにプッシュしようとしましたが、これは機能しません。文字列の配列またはオブジェクトの配列をプッシュする必要があります。

2. 親コンポーネントの状態変数にサブコンポーネントを設定しようとしています。あなたはそれをしてはいけません。表示するデータをコンポーネントの状態として設定し、このデータをサブコンポーネントに渡し、サブコンポーネントがそのデータをどのようにレンダリングするかを決定する必要があります。