mobx -state-tree 中的代理

Question

I'm trying to build a simple budgeting app. Whenever I insert this model into my app. I get a proxy for the expenses. Where is the flaw in my thinking?

I have an action on the Budget.js when I print it in the useEffect this is what console.log outputs for the expenses a proxy. I'm expecting it to print the actual data from the initial state.

React.useEffect(() => {
    budget.addDummyData()
    console.log(budget.expenses)
  }, [])


[[Handler]]: Object
[[Target]]: Array(0)
[[IsRevoked]]: false


//////////////////////////////////////////////////////////////////////
//SubCategory
const SubCategory = types
  .model('SubCategory', {
    id: types.maybeNull(types.string, ''),
    name: types.maybeNull(types.string, ''),
    amount: types.maybeNull(types.number, 0)
  })
const SubCategoryStore = types.model({ subCategory: types.optional(SubCategory, {}) })
export default SubCategoryStore
/////////////////////////////////////////////////////////////////////////
//Category.js
const Category = types
  .model('Category', {
    id: types.maybeNull(types.string, ''),
    name: types.maybeNull(types.string, ''),
    subCategories: types.array(SubCategory)
  })
const CategoryStore = types.model({ category: types.optional(Category, {}) })
export default CategoryStore
///////////////////////////////////////////////////////////////
// Budget
const Budget = types
  .model('Budget', {
    totalIncome: 200,
    expenses: types.array(Category)
    // incomes: types.optional(types.array(Category), [])
  }).actions({
    addDummyData() {
      self.expenses.push(initialStateExpenses)
    }
})
const BudgetStore = types.model({ budget: types.optional(Budget, {}) })
export default BudgetStore


const initialStateExpenses = {
  id: '123',
  name: 'Food',
  subCategories: [
    {
      id: '1314',
      name: 'Grocery',
      amount: 250
    },
    {
      id: '1442',
      name: 'Restaurants',
      amount: 50
    }
  ]
}

Answer 1

expenses is of type Category[], you are passing an object. I assume you want to set the expenses from subCategories . If so you can try this

    addDummyData() {
      initialStateExpenses.subCategories.forEach(ex => self.expenses.push(ex))
    }
or
    addDummyData() {
      self.expenses = initialStateExpenses.subCategories
    }

A better approach would be to pass the initialStateExpenses via args to the addDummyData function so your model doesn't depend on external variables

    addDummyData(initialStateExpenses) {
      initialStateExpenses.subCategories.forEach(ex => self.expenses.push(ex))
    }
or
    addDummyData(initialStateExpenses) {
      self.expenses = initialStateExpenses.subCategories
    }

then use it like
    budget.addDummyData(initialStateExpenses)