这是我的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