Pls help with fetch

[Potiekhin]

import { makeAutoObservable } from 'mobx'

class Users {
users = []

constructor() {
    makeAutoObservable(this)
}

getUsers() {
    fetch('https://jsonplaceholder.typicode.com/users')
        .then(response => response.json())
        .then(json => {
            this.users = [...this.users, ...json]
        })
}

}

export default new Users()

[kubk]

You are losing this in your example. It looks like you are calling getUsers like this:

<Button onClick={userStore.getUsers}/>

This won't work because of the JS nature. There are few ways to fix it:

1. Prevent losing this:

<Button onClick={() => userStore.getUsers()}/>

2. Convert your method to arrow function:

<Button onClick={userStore.getUsers}/>

...

class UserStore {
  ...
  getUsers = () => {
    ...
  }
}

3. Use Mobx autobind functionality:

<Button onClick={userStore.getUsers}/>

...

class UserStore {
  ...
  constructor() {
    makeAutoObservable(this, {}, { autoBind: true })
  }
  
  getUsers() {
    ...
  }
}

[Potiekhin]

Thank you) with autoBind works great)