How to convert Proxy to Array in mobx-react

Question

I have an observable variable defined in the store, and I attempt to make multiple calls and push results to the Array. When I am so doing this, I find the array I defined is a proxy so that I cannot display the info in my page.
This is my attempt:

class ClubListStore {
  @observable userClubList

  constructor() {
    this.userClubList = []
  }


  @action getUserClubs = () => {
    const userContract = new appchain.base.Contract(playerAbi, config.userContract)
    appchain.base.getDefaultAccount().then(sender => {
      userContract.methods.getUserClubsSize(sender).call().then((res) => {
        return res
      }).then((res) => {
          for (let i = 0; i < res; i++) {
            userContract.methods.getUserClubs(sender, i).call().then((clubAddr) => {
              this.userClubList.push(clubAddr)//push value to array here
            })
          }
        }
      })
    })
  }


}

const clubListStore = new ClubListStore()

export default clubListStore

When I console.log the array userClubList, it is displayed as a proxy.

Proxy {0: "0xf3fA7DB0Cb79b12ca2081F9f5865f3fd01127FAd", length: 1, Symbol(mobx administration): ObservableArrayAdministration}
[[Handler]]
:
Object
[[Target]]
:
Array(1)
[[IsRevoked]]
:
false

My question is:
How can I convert this proxy to the array that holds values I pushed in from calls?

thank you

Answer 1

use console.log(toJS(userClubList))

https://mobx.js.org/api.html#tojs