Error - Firebase.push failed :

Question

질문 모음과 관련된 옵션을 '퀴즈'라는 firebase ref에 푸시하려고합니다. 제출을 클릭하면 콘솔에서 다음과 같이 표시됩니다.

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)이 문제를 해결하는 방법을 여기에 나 정말 무엇을 의미하는지 모른다. 나는 Option 구성 요소를 Question 구성 요소 배열 []로 푸시하고 질문 구성 요소를 QuizBuilderForm 배열 []에 넣습니다.

감사합니다!

는 여기에 내가 코드에서 발견이 중요한 실수가 있습니다

// 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. 반응 할 구성 요소를 작동시킬 firebase에 밀어 넣으려고합니다. 문자열 배열이나 객체 배열을 푸시해야합니다.

2. 상위 구성 요소의 상태 변수에 하위 구성 요소를 설정하려고합니다. 당신은 그렇게해서는 안됩니다. 표시 할 데이터를 구성 요소의 상태로 설정 한 다음이 데이터를 하위 구성 요소에 전달하고 하위 구성 요소가 렌더링 방법을 결정하도록해야합니다.