javascript - How to update object in Mobx observable array - Stack Overflow

admin管理员组

文章数量:1401247

Codesandbox to the problem: =/src/store.js

I have the following store:

class PersonStore {
  persons = [];

  constructor() {
    makeAutoObservable(this, {}, { autoBind: true });
  }

  *fetchPersons() {
    const response = yield fetch(
      ";
    );

    this.persons = yield response.json();
  }
}

export default new PersonStore();

Now, I want to update persons inside the person-list.

When I update a single field on on items inside the array like this it works as expected and the UI updates:

  update(id) {
    let updated = this.persons.find((p) => p.id === id);

    // This works...
    updated.first_name = "FOO";
  }

However, in the future I would like to pass more plex, updated data into this function. So my idea was to basically assign a totally new object with the updated values in the list.

Unfortunately, this does not work as I expected it:

  update(id) {
    let updated = this.persons.find((p) => p.id === id);

    // This does not work...
    const dummy_person = { first_name: 'foo', last_name: 'bar', id: 99 }
    updated = dummy_person
  }

My first guess was that this does not work because the objects inside the array are not "normal objects" but observables. So I created a model for the persons:

class Person {
  id = null;
  first_name = "";
  last_name = "";

  constructor() {
    makeAutoObservable(this);
    this.first_name = "FOO";
    this.last_name = "BAR";
  }
}

...but this does still not work...

  update(id) {
    let updated = this.persons.find((p) => p.id === id);

    // This does not work...
    const dummy_person = new Person()
    updated = person
  }

How can I "replace" an object inside the array here with an object containing the updated data?

Codesandbox to the problem: https://codesandbox.io/s/serverless-thunder-6gj04?file=/src/store.js

I have the following store:

class PersonStore {
  persons = [];

  constructor() {
    makeAutoObservable(this, {}, { autoBind: true });
  }

  *fetchPersons() {
    const response = yield fetch(
      "https://random-data-api./api/users/random_user?size=5"
    );

    this.persons = yield response.json();
  }
}

export default new PersonStore();

Now, I want to update persons inside the person-list.

When I update a single field on on items inside the array like this it works as expected and the UI updates:

  update(id) {
    let updated = this.persons.find((p) => p.id === id);

    // This works...
    updated.first_name = "FOO";
  }

However, in the future I would like to pass more plex, updated data into this function. So my idea was to basically assign a totally new object with the updated values in the list.

Unfortunately, this does not work as I expected it:

  update(id) {
    let updated = this.persons.find((p) => p.id === id);

    // This does not work...
    const dummy_person = { first_name: 'foo', last_name: 'bar', id: 99 }
    updated = dummy_person
  }

My first guess was that this does not work because the objects inside the array are not "normal objects" but observables. So I created a model for the persons:

class Person {
  id = null;
  first_name = "";
  last_name = "";

  constructor() {
    makeAutoObservable(this);
    this.first_name = "FOO";
    this.last_name = "BAR";
  }
}

...but this does still not work...

  update(id) {
    let updated = this.persons.find((p) => p.id === id);

    // This does not work...
    const dummy_person = new Person()
    updated = person
  }

How can I "replace" an object inside the array here with an object containing the updated data?

• javascript
• reactjs
• mobx
• mobx-react

Share Improve this question Follow asked Mar 14, 2021 at 19:40 AvantiCAvantiC 37711 gold badge33 silver badges1818 bronze badges 1

• 2 When you write updated = dummy_person you are only updating the updated reference with a new value. MobX is not involved at that stage. You could try something like this instead: let updatedIndex = this.persons.findIndex((p) => p.id === id); this.persons.splice(updatedIndex, 1, dummy_person); – Tholle Commented Mar 14, 2021 at 19:49

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

As @Tholle said in the ment, you are only updating local variable, not actual object.

In simpler words this is what's happening inside your update function:

1. let updated = this.persons.find((p) => p.id === id); - you create local variable updated and assign some object (person) to it

2. const dummy_person = { first_name: 'foo', last_name: 'bar', id: 99 } - you create dummy object and assign it to local dummy_person constant

3. updated = dummy_person - here you assign dummy_person value to updated variable. Basically you only reassign value of updated variable, you are not changing the person-object, but only changing to what value updated variable points.

Sometimes people explain it with boxes, like imagine that updated is a box and at first you put person inside of it and then changed you mind and put dummy_person inside, but actual person wasn't changed.

So what can you do?

As @Tholle said, you can use splice to change persons array, it will basically throw away old person and insert new one.

Or if you actually want to update old person you could use Object.assign(updated, dummy_person)

Or you could use map (although it will reassign whole array, might be unnecessary sometimes):

  update(id) {
    const dummy_person = { first_name: 'foo', last_name: 'bar', id: 99 };

    this.persons = this.persons.map(person => person.id === id ? dummy_person : person);
  }

There is a lot what you can do, depends on what you what. The main thing is understand how reactivity works!

More about this topic in the docs: https://mobx.js/understanding-reactivity.html

本文标签： javascriptHow to update object in Mobx observable arrayStack Overflow