我正在创建一个将数据保存在Firebase中的应用程序,但出现了一些错误

时间:2020-06-07 20:47:04

标签: javascript reactjs firebase firebase-realtime-database

这是我的recipe.js。

 multiprocessing.set_start_method('spawn')

这是我的Firebase实时配置。所以基本上,如果我有此配置,代码就可以正常工作。

import React, { Component } from 'react';
import { css } from 'react-emotion';
import ClipLoader from 'react-spinners/ClipLoader';
import Firebase from "../Firebase/firebase";

import {  withAuthorization } from "../Session";

const override = css`
    display: block;
    margin: 0 auto;
    border-color: red;
`;

 class Recipes extends Component {

    state = {
        recipes: [],
        loading: true
    }

    componentDidMount() {
        let rec = [];
        Firebase.database().ref('categories')
            .once('value')
            .then((snapshot) => {
                snapshot.forEach((data) => {
                    //cat.push({key: data.key, category_name: data.val().name});
                    data.child('recipes').forEach((recipe) => {
                        //console.log(recipe.val());
                        rec.push({
                            key: recipe.key,
                            ...recipe.val()
                        });
                        //rec.push({key: recipe.key, category_name: data.val().name});
                    })
                });
                this.setState({recipes: rec}, () => {
                    this.setState({loading: false});
                });
            }).catch(err => {
                console.log(err);
            })
    }

    render() {
        const { recipes, loading } = this.state;

        return loading ?
            <div className="text-center">
                <ClipLoader
                    className={override}
                    sizeUnit={"px"}
                    size={150}
                    color={'#123abc'}
                    loading={this.state.loading}/>
            </div> : (
            <div className="row">
                <div className="col-lg-12">
                    <h2>All recipes</h2>
                    <div className="table-responsive">
                        <table className="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Recipe Name</th>
                                    <th>Ingredients</th>
                                    <th>Direction</th>
                                    <th>Recipe Image</th>
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    recipes.map((recipe, index) =>
                                        <tr key={index}>
                                            <td>{recipe.key}</td>
                                            <td>{recipe.name}</td>
                                            <td>
                                                <div dangerouslySetInnerHTML={{__html: recipe.ingredients}} />
                                            </td>
                                            <td>{recipe.direction}</td>
                                            <td>
                                                <img width='200px' height='200px' src={recipe.image} alt={recipe.name}/>
                                            </td>
                                        </tr>
                                    )
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        )
    }
}
const condition = (authUser) => !!authUser;
export default withAuthorization(condition)(Recipes);

但是我使用下面的配置,因为我在登录和注册时一直在使用它,除了上面的JS文件外,它们的工作都很好。

var firebaseConfig = {
    apiKey: "AIzaSyDeiBdL-3cCN7NwnxD__WgCVbYkEG_BeuM",
    authDomain: "my-application-ffa5f.firebaseapp.com",
    databaseURL: "https://my-application-ffa5f.firebaseio.com",
    projectId: "my-application-ffa5f",
    storageBucket: "my-application-ffa5f.appspot.com",
    messagingSenderId: "206442099732",
    appId: "1:206442099732:web:7946c186328f494a90a301"
  };

  firebase.initializeApp(firebaseConfig);

  export default firebase

这是我遇到的错误 without view compile

这是在单击视图编译后。 View compiled is clicked

0 个答案:

没有答案