错误 - Firebase.push 失败：

Question

我正在尝试将一组问题和相关选项推送到名为“测验”的 Firebase 参考。单击提交时，我在控制台中得到以下信息。

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 组件数组 [ ]，然后将 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

我在您的代码中发现了 2 个主要错误。

1. 您正在尝试在 firebase 上推送一个无法正常工作的 react 组件。您需要推送一个字符串数组或对象数组。

2. 您正在尝试将子组件设置为父组件的状态变量。你不应该那样做。您需要将要显示的数据设置为组件的状态，然后将此数据传递给您的子组件，让子组件决定如何呈现。