Not all state attributes populating from firebase databse in react app - reactjs

Question

I've been following a react tutorial by Wes Bos and I can't seem to get some of the state to persist using the firebase database. My 'order' state seems to persist, but the 'fishes' state in my inventory doesn't.
Specifically, I can see the changes made to 'fishes' once I change them in the react app, but if I exit the store and come back in, the order persists but the 'fishes' do not.
base.js
import Rebase from 're-base';
import * as firebase from 'firebase';
const app = firebase.initializeApp({
apiKey: "XXXXXXXXX",
authDomain: "XXXXXXXX",
databaseURL: "XXXXXXXXXXXXXXXXX",
projectId: "XXXXXXXXXXXX",
storageBucket: "XXXXXXXXXXXXXXXXX",
});
const base = Rebase.createClass(app.database());
export default base;
app.js
import React from 'react';
import Header from './Header';
import Order from './Order';
import Inventory from './Inventory';
import Fish from './Fish';
import sampleFishes from '../sample-fishes';
import base from '../base';
import PropTypes from 'prop-types';
import * as firebase from 'firebase';
export default class App extends React.Component {
constructor() {
super();
this.addFish = this.addFish.bind(this);
this.loadSamples = this.loadSamples.bind(this);
this.addToOrder = this.addToOrder.bind(this);
this.updateFish = this.updateFish.bind(this);
this.removeFish = this.removeFish.bind(this);
this.removeFromOrder = this.removeFromOrder.bind(this);
this.state = {
fishes: {},
order: {},
};
}
componentDidMount() {
this.FishRef = base.syncState(`${this.props.match.params.storeId}/fishes`,
{
context: this,
state: 'fishes'
});
}
componentDidMount() {
this.OrderRef = base.syncState(`${this.props.match.params.storeId}/order`,
{
context: this,
state: 'order'
});
}
componentWillUnmount() {
base.removeBinding(this.FishRef);
base.removeBinding(this.OrderRef);
}
addFish(fish) {
const fishes = {...this.state.fishes};
const timestamp = Date.now();
fishes[`fish-${timestamp}`] = fish;
this.setState({ fishes });
}
removeFish(key) {
const fishes = {...this.state.fishes};
fishes[key] = null;
this.setState({ fishes });
}
updateFish(key, updatedFish) {
const fishes = {...this.state.fishes};
fishes[key] = updatedFish;
this.setState({ fishes });
}
loadSamples() {
this.setState({
fishes: sampleFishes
});
}
addToOrder(key) {
const order = {...this.state.order};
order[key] = order[key] + 1 || 1;
this.setState({ order });
}
removeFromOrder(key){
const order = {...this.state.order};
delete order[key];
this.setState({ order });
}
render() {
return(
<div className="catch-of-the-day">
<div className="menu">
<Header tagline="Fresh seafood market"/>
<ul className="list-of-fishes">
{Object
.keys(this.state.fishes)
.map(key => <Fish key={key}
details={this.state.fishes[key]}
addToOrder={this.addToOrder}
index={key}
/>)
}
</ul>
</div>
<Order fishes={this.state.fishes}
order={this.state.order}
removeFromOrder={this.removeFromOrder}/>
<Inventory addFish={this.addFish}
loadSamples={this.loadSamples}
fishes = {this.state.fishes}
updateFish = {this.updateFish}
removeFish = {this.removeFish}/>
</div>
);
}
}
App.propTypes = {
match: PropTypes.object.isRequired
}

Answer 1

you declared componentDidMount twice , here :
componentDidMount() {
this.FishRef = base.syncState(`${this.props.match.params.storeId}/fishes`,
{
context: this,
state: 'fishes'
});
}
componentDidMount() {
this.OrderRef = base.syncState(`${this.props.match.params.storeId}/order`,
{
context: this,
state: 'order'
});
}
this mean the first will execute and the second will not or the other way around .
fix this by add the body of second the body of the first like this :
componentDidMount() {
this.FishRef = base.syncState(`${this.props.match.params.storeId}/fishes`,
{
context: this,
state: 'fishes'
});
this.OrderRef = base.syncState(`${this.props.match.params.storeId}/order`,
{
context: this,
state: 'order'
});
}