ReactJS mobx - 不更新可观察数组

Question

If you have an observable list in your store:

@obserable public Claimslist: IClaim[] = [];

where IClaim is an interface, claims is an array of IClaim objects

IClaim contains a varaible in its object called moveOutDate Each claim object has id variable.

And now you want to update or get that variable by the claim id

So you have 2 functions:

Get

  /**
   * Gets the moveOutDate of a claim by claim ID
   */
  @action getMoveOutDateById = (id: string) => {
    // Get the claim by id
    const claim = this.Claimslist.find((element: IClaim) => element.id === sessionStorage.getItem('claim-id'));
    if (claim) {
      if (!claim.moveOutDate) {
        return undefined;
      }
      return moment(new Date(claim.moveOutDate)).toDate();
    }

    return undefined;
  }

Set

  /**
   * Sets moveOutDate in claim by claim ID
   */
  @action public setMoveOutDate = (id: string, date: Date) => {
    const claim = this.Claimslist.find((element: IClaim) => element.id === id);
    if (claim) {
      claim.moveOutDate = date.toString();
    }
  }

Okey, but now when you use getMoveOutDateById at first in your render it works and renders the date, but once you call setMoveOutDate onUpdate of the date component, the render won't update, but the store will update and you can only see changes if you refresh the page.

Now I managed to solve it, by doing:

this.Claimslist = this.Claimslist.slice();

and adding an hidden input of Claimslist:

const {Claimslist} = this.props.claimsStore;

and

<input type="hidden" value={Claimslist} />

Why does it happen, if the whole object is obserable and is wrapped with @action why doesn't it change without using slice() and having an hidden input?

Answer 1

Mobx observable only observes shallow values. Meaning lets say I have @observable claims[] then claims[0] = something will trigger an update but claims[0].foo = bar will not (docs) . To fix this you need to make foo also observable by adding @observable foo on claim object.

Consider the following example. Notice the difference between Claim1 and Claim2 . The components are exactly same yet ClaimView2 will update and ClaimView1 will not. Demo

import React from "react";
import { render } from "react-dom";
import { observable, action } from "mobx";
import { observer } from "mobx-react";

class Claim1 {
  moveOutDate: Date;
  constructor() {
    this.moveOutDate = new Date();
  }
}

@observer
class ClaimsView1 extends React.Component {
  @observable claims: Claim1[] = [
    new Claim1(),
    new Claim1()
  ];

  @action.bound
  updateClaims(){
    this.claims.forEach(claim => {
      claim.moveOutDate = new Date();
    })
  }

  render() {
    return <div>
      <pre>
        {"ClaimsView1 = \n" + JSON.stringify(this.claims, null, "  ")}
      </pre>
      <button onClick={this.updateClaims}> Update </button>
    </div>
  }
}


class Claim2 {
  @observable moveOutDate: Date;
  constructor() {
    this.moveOutDate = new Date();
  }
}

@observer
class ClaimsView2 extends React.Component {
  @observable claims: Claim2[] = [
    new Claim2(),
    new Claim2()
  ];

  @action.bound
  updateClaims(){
    this.claims.forEach(claim => {
      claim.moveOutDate = new Date();
    })
  }

  render() {
    return <div>
      <pre>
        {"ClaimsView2 = \n" + JSON.stringify(this.claims, null, "  ")}
      </pre>
      <button onClick={this.updateClaims}> Update </button>
    </div>
  }
}

render(
  <>
    <ClaimsView1 />
    <ClaimsView2 />
  </>,
  document.getElementById("root")
);

Update:

Here's a demo for the solution I gave in the comments

import React from "react";
import { render } from "react-dom";
import { observable, action } from "mobx";
import { observer } from "mobx-react";

interface IClaim {
  moveOutDate: Date;
}

@observer
class ClaimsView extends React.Component<{claims: IClaim[]}> {
  @observable claims: IClaim[] = this.props.claims.map(claim => observable(claim))

  updateClaims = () => {
    this.claims.forEach(claim => {
      claim.moveOutDate = new Date();
    })
  }

  render() {
    return <div>
      <pre>
        {"claims = \n" + JSON.stringify(this.claims, null, "  ")}
      </pre>
      <button onClick={this.updateClaims}> Update </button>
    </div>
  }
}


render(
  <ClaimsView claims={[
    { moveOutDate: new Date() },
    { moveOutDate: new Date() }
  ]} />,
  document.getElementById("root")
);

Answer 2

It is not exactly the same, missing @observable, it will be the same if:

class Claim1 {
  @observable moveOutDate: Date;
...