Question

我一直在关注Wes Bos的反应教程，我似乎无法使用firebase数据库继续使用某些状态。我的'订单'状态似乎仍然存在，但我的库存中的'鱼'状态却没有。

具体来说，一旦我在react应用程序中更改它们，我就可以看到对'鱼'的更改，但如果我退出商店并重新进入，则订单仍然存在，但'鱼'不会。

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

你宣布componentDidMount两次，在这里：

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' 
    });
}

这意味着第一个将执行而第二个将不会或反过来。

修复这个通过添加第一个体的第二个体如下：

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' 
    });

}

并非所有状态属性都来自反应应用程序中的firebase数据库

1 个答案: