如何通过 re-base 将状态同步到 firebase？答案

【问题标题】：how to syncState to firebase with re-base?如何通过 re-base 将状态同步到 firebase？
【发布时间】：2017-10-18 05:34:12
【问题描述】：

我正在尝试使用 re-base 来持久化数据，但使用此设置，我什么也得不到。当我尝试addExpense 时，我没有收到任何错误，也没有新对象。

我在这里重新设置：

class ExpensesContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      expenses: {
        expenseList: []
      }
    }
  }

  componentDidMount(){
    base.syncState(`/`, {
      context: this,
      state: 'expenses.expenseList',
      asArray: true
    });
  }

  addExpense = (expense) => {
    this.setState({
      expenses: this.state.expenses.expenseList.concat([expense]) //updates Firebase and the local state
    });
  }

如果我没有使用 componentDidMount，那么我的 addExpense 操作如下所示，并且一切正常：

  // addExpense = (expense) => {
  //   const expenseList = [...this.state.expenses.expenseList, expense];
  //   this.setState({expenses: {expenseList}});
  // }

【问题讨论】：

你能说明失败的.map()调用在哪里吗？另外，您在哪里或如何使用loadSamples？我认为这里应该是/：expenses\expenseList
请看我更新的帖子。

标签： reactjs firebase

【解决方案1】：

expenses: this.state.expenses.expenseList.concat([expense])

在 .setState() 方法上，您传递了错误的值，最终看起来像 { expenses: [<list here>] } 而应该是：

expenses: { expenseList: this.state.expenses.expenseList.concat([expense])}

而re-base 不仅适用于.concat()（通过阅读文档我也一样）

这就是说，您只需 .setState() 预期的变量，它应该会更新。

【讨论】：

我相信你的回答很有帮助，但我想出了我正在回答我的问题的解决方案

【解决方案2】：

如果有人遇到类似问题 - 这是对我有用的解决方案：

class ExpensesContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
        expenseList: []
    }
  }

  componentDidMount(){
    base.syncState(`/expenses`, {
      context: this,
      state: 'expenseList',
      asArray: true
    });
  }

  deleteExpense = (expenseToRemove) => {
    const expenseList = [...this.state.expenseList].filter((expense) => {
      return expenseToRemove !== expense.uid;
    });
    this.props.history.push("/expenses");
    this.setState({expenseList});
  }

  addExpense = (expense) => {
    this.setState({
      expenseList: this.state.expenseList.concat([expense]) 
    });
    this.props.history.push("/");
  }

【讨论】：