CODEWITHSUNDEEP
mobxmobx-react
Manspof
Manspof

Reputation: 357

set array of data into mobx array show proxy objects

I'm using react js with mobx and I get data from api. the data I get is array of objects. when I set the data into mobx variable then I see array of proxy objects(not sure what the proxy says). I'm trying just to set the array of objects I get from api into mobx variable.

my store

class UserStore {
@persist @observable token = null
@observable tasks = []
@observable done = false

@persist @observable email = ''

constructor() {

}
@action
getTasks = async () => {
    try {
        let response = await Api.getTasks()
        console.log('getTasks',response.tasks)
        this.tasks = response.tasks
        console.log('my new tasks',this.tasks)

    } catch (e) {
        console.log(e)
    }
}

enter image description here

as you can see here in the first block('black') the data i get from api, then i set the respnse.tasks into this.tasks.

 this.tasks = response.tasks
  console.log('my new tasks',this.tasks)

Upvotes: 24

Views: 24301

Answers (4)

afyonkes
afyonkes

Reputation: 155

If you run debugger, stop the debugger. It messes the mobx's flow.

Upvotes: -1

Jöcker
Jöcker

Reputation: 6758

In my case, toJS was not working because I had a class with a variable with the type of another class. So, I needed to create new objects from the JSON:

parsedArray.map(
  (a) =>
    new MyObj1({
      id: a.id,
      myObj2: new MyObj2({
        label: a.label,
      }),
      title: a.title,
    })
);

Upvotes: 0

Tarun konda
Tarun konda

Reputation: 1880

You can convert proxy to JS:

import { toJS } from 'mobx'

// example
toJS(response)

Upvotes: 61

Kev
Kev

Reputation: 5442

It depends on how you want to observe the data.

"I'm trying just to set the array of objects I get from api into mobx variable"

is not really your end-goal.

If you want your observers to:

  • option a: react when the array reference change
    = No care for values in the array.
    Use @observable.ref tasks.

  • option b: react when the references of each value in the array change
    = No care for the individual objects properties.
    Use @observable.shallow tasks.

  • option c: react on the individual objects properties too
    = Make everything observable, references and object properties
    Use @observable tasks like you do.

Like indicated in the comments, mobx5 is using Proxy and some behaviour might differ compared to previous version.

More info: Mobx arrays, Mobx decorators, shallow observability

Note: you would need to give more details if this does not help you, like your react component code.

Upvotes: 13

Related Questions