Question

我正在使用Mobx和ReactJS来创建一个简单的费用应用程序。这是我的主要App.js：

import React from 'react';
import { observer } from 'mobx-react';
import { autorun } from 'mobx';
import DevTools from 'mobx-react-devtools';

import ExpenseStore from './stores/ExpenseStore';
import AddExpenseView from './components/AddExpenseView';
import CategoryView from './components/CategoryView';

var ExpenseStoreObj = new ExpenseStore();

@observer
export default class App extends React.Component {
  constructor() {
    super();
    this.updateExpense = this.updateExpense.bind(this);
    this.deleteExpense = this.deleteExpense.bind(this);
    this.categorizeExpenses = this.categorizeExpenses.bind(this);
  }

  updateExpense(newExpense) {
    ExpenseStoreObj.addExpense(newExpense);
  }

  deleteExpense(ExpenseId) {
    ExpenseStoreObj.removeExpense(ExpenseId);
  }

  categorizeExpenses() {
    return ExpenseStoreObj.categorizeExpenses();
  }

  render() {
    return (
      <div>
        <DevTools />
        <div className="app-container">
          <div className="col-xs-6 border">
            <AddExpenseView
              allExpenses={ExpenseStoreObj.expenses}
              expenseCategories={ExpenseStoreObj.expenseCategories}
              updateExpense={this.updateExpense}
              deleteExpense={this.deleteExpense}
            />
          </div>
          <div className="col-xs-6 border">
            <CategoryView
              categorizeExpenses={this.categorizeExpenses}
            />
          </div>
        </div>
      </div>
    );
  }
}

这是ExpenseStore.js：

import { observable, computed, reaction } from 'mobx';

export default class ExpenseStore {
    constructor(props) {
        this.id = 1;
    }
    @observable expenses = [];
    expenseCategories = ['Food', 'Clothing', 'Transport'];

    handleError(message) {
        alert(message);
    }

    addExpense(newExpense) {
        if (newExpense.expenseName == '') {
            this.handleError('Please enter expense name');
        }
        else if (newExpense.expenseCategory == '') {
            this.handleError('Please select expense categorry');
        }
        else if (newExpense.expensePrice == '') {
            this.handleError('Please enter expense value');
        }
        else {
            newExpense.id = this.id++;
            this.expenses.push(newExpense);
            this.categorizeExpenses();
        }
    }

    removeExpense(expenseId) {
        let expenseIndex = this.expenses.findIndex(x => x.id == expenseId);
        this.expenses.splice(expenseIndex, 1);
    }

    categorizeExpenses() {
        let groupedResult = this.expenses.reduce(function (hash) {
            return function (r, a) {
                if (!hash[a.expenseCategory]) {
                    hash[a.expenseCategory] = { expenseCategory: a.expenseCategory, expensePrice: 0 };
                    r.push(hash[a.expenseCategory]);
                }
                hash[a.expenseCategory].expensePrice = parseInt(hash[a.expenseCategory].expensePrice) + parseInt(a.expensePrice);
                return r;
            };
        }(Object.create(null)), []);
        return groupedResult;
    }

}

当我添加新费用时（即调用ExpenseStore中的addExpense时）我在控制台中收到此错误：“[mobx]不变失败：此时不允许更改状态等副作用。您是否尝试从例如React组件的render函数修改状态？尝试修改：ExpenseStore@2.expenses“。如果我从this.expenses.push(newExpense)删除addExpense，则错误消失

有人能说出这里的问题是什么，我该如何解决？

React app中的“mobx Invariant failed”错误

0 个答案: