Component not updated

[dacz]

Having component

const Name = observer(( { authorItem, ...other } ) => {
  // const author = toJS(authorItem).data;
  const author = authorItem.data;
  if (!author || !author.slug || !author.displayName) {
    return (<div>loading</div>);
  }

  return (
    <div className={ styles.name } { ...other }>
      <AuthorLink slug={ authorItem.data.slug }>
        { authorItem.data.displayName }
      </AuthorLink>
    </div>
  );
});

authorItem is observable class instance, that is updated asynchronously by different part of the app. First run displays "loading" (correct, no data still available). Then the item is updated, but the components is not (still shows "loading").

When I uncomment the line const author = toJS(authorItem).data;, the components starts updating correctly and correct data are displayed.

Am I doing something fundamentally wrong with mobx, here?

Thanks.

PS: I tried even to rewrite AuthorLink (observer) to accept authorItem (observable) and make dereferencing there… no change, still not updating.

[andykog]

It seems to work: https://jsfiddle.net/Sl1v3r/00djx9vd/

[dacz]

ummm. Yes, it works, but unfortunately not in my real setup. Do you have any idea, what can I check? In real setup the higher component gets observable object (artworkItem) that contains reference to authorItem - another observable object from another store. The stores are defined as class instances.

The only idea what may be different than usual is the cross-referencing.

In the code below (this is actually the caller):
console.log('AUTHOR:', author); displays the author values after it receives data:
AUTHOR: Object {$mobx: ObservableObjectAdministration}

But the AuthorName component is not updated.

const ListItem = ( { artworkItem } ) => {
  if (noData(artworkItem)) return noData(artworkItem);

  const artwork = artworkItem.data;
  const authorItem = artworkItem.data._author;
  // const author = toJS(authorItem).data;
  const author = authorItem.data;
  console.log('AUTHOR:', author);

  return (
    <div className={ styles.item }>
      <div className={ styles.insideItem }>
        <div className={ styles.meta }>
          <AuthorName
            displayName={ author.displayName }
            slug={ author.slug }
            className={ styles.authorName }
          />
        </div>
      </div>
    </div>
  );
};

[dacz]

When I change const author = authorItem.data; in this component to const author = toJS(authorItem).data; … it starts working again as expected and even the console log shows that first time it runs with empty objects (data not yet available) and second time with all data and updates the component.

Seems like until some mobx function (like toJS) is not imposed on authorItem, it will not update the subcomponent.

[mweststrate]

There is nothing special about toJS, except that reads from all fields in your object. So it might be that toJS accesses a field which is changed later on, which triggers your rendering, but which is not the field you were expecting to react to. Did you try to use the MobX react devtools or whyRun to see what observables your component is subscribing to?

Also, is the property data of authorItem itself observable? (and not just the value).

[dacz]

Thanks @mweststrate for your insights. I'll try mobx devtools and I wasn't aware of whyRun.

The Item are defined:

export default class Item {
  @observable data = {};
  @observable ts;
  @observable status;
  @observable error;

  store = null;

  constructor(store, idOrData, err) {
    if (!idOrData) throw new Error('Item has to be created with data');
    this.store = store;
    transaction(() => {
      this.ts = Date.now();
      if (typeof idOrData === 'string') {
        this.data = extendObservable(this.data, { _id: idOrData });
        if (!err) {
          this.status = REQUEST_FETCH;
        } else {
          this.status = 'error';
          this.error = err;
        }
      } else {
        const dereferencedData = this.dereferenceData(idOrData);
        this.data = extendObservable(this.data, dereferencedData);
        this.status = undefined;
        this.error = undefined;
      }
    });
  }

  updateFromServer(dataOrId, err) {
    if (
      dataOrId && dataOrId._id && this.data._id !== dataOrId._id
    ) throw new Error('ID mismatch');
    const hasData = typeof dataOrId === 'object';
    const data = hasData ? dataOrId : undefined;
    if (!data && !err) return this;
    transaction(() => {
      if (!err) {
        if (data) {
          this.ts = Date.now();
          const dereferencedData = this.dereferenceData(data);
          if (
            dereferencedData && !deepEqual(toJS(this.data), dereferencedData)
          ) this.data = extendObservable(this.data, dereferencedData);
          if (this.status) this.status = undefined;
          if (this.error) this.error = null;
        }
      } else {
        this.ts = Date.now();
        this.status = 'error';
        this.error = err;
      }
    });
    return this;
  }
  // and more...
}

artworkItem and authorItem are instances of this class (but different stores). artworkItem.data.author contains reference to authorItem from different store.

So when first required eg. authorItem, it creates dummy/empty item with ts, status and data just {_id: id}. The autorun recognizes it and fetch items and updates them (so there are many more props than just _id). Therefore extendObservable within updateFromServer (maybe it is not needed in constructor).

Everything works and updates properly except the author (until I do toJS).

When I console.log the referenced author.data ( with console.log('AUTHOR DATA:', artworkItem.data._author.data);) in ListItem (my previous post), it shows: Object {$mobx: ObservableObjectAdministration} … so I suppose that it is observable.

I'll try the devTools and whyRun but now I'm puzzled what am I doing wrong.

[dacz]

my ListItem beginning:

const ListItem = ( { artworkItem } ) => {
  if (noData(artworkItem)) return noData(artworkItem);

  const artwork = artworkItem.data;
  const authorItem = artworkItem.data._author;
  // const author = toJS(authorItem).data;
  console.log('AUTHOR DATA:', artworkItem.data._author.data);
  // const author = toJS(authorItem).data;
  whyRun();
  const author = authorItem.data;
  console.log('ISOBSERVABLE AUTHOR: ', isObservable(author));
//... and more

the whyRun tells me:

This reaction will re-run if any of the following observables changes:
    Item@11.error - Item@11.status - Item@11.data - Item@11.data._author - Item@12.data

isObservable(author) is true.

Still not updating...

[dacz]

Seems like ListItem is not run again when author data arrives.

Even when I pass the author (observable) to the AuthorName component as a prop, check in the AuthorName component that author is observable and dereference it there, still the AuthorName component is not updating.

I'd suppose that the ListItem would update the AuthorName component (if the values are passed as props and not observer). I know that in that case all ListItems would be re-rendered just because of authorItem change.

Or I'd suppose that if I'll pass the author (observable) to AuthorName and use observer on that, this component will update after data received (just the AuthorName part of ListItem… as recommended to make smallest component reactive.

Did not help rewriting component to class ListItem with @observer decorator.

Now I use the toJS() hack to move on but hope to understand what's going on.

[mweststrate]

Hi David,

I usually try to answer to these kind of questions asap, but currently I'm
in the middle of preparing an unexpected conference talk, so I'll come back
to you next week. Sorry for the inconvenience in the mean time!

Op vr 1 jul. 2016 om 17:04 schreef David Cizek notifications@github.com:

Seems like ListItem is not run again when author data arrives.

Even when I pass the author (observable) to the AuthorName component as a
prop, check in the AuthorName component that author is observable and
dereference it there, still the AuthorName component is not updating.

I'd suppose that the ListItem would update the AuthorName component (if
the values are passed as props and not observer). I know that in that case
all ListItems would be re-rendered just because of authorItem change.

Or I'd suppose that if I'll pass the author (observable) to AuthorName and
use observer on that, this component will update after data received (just
the AuthorName part of ListItem… as recommended to make smallest component
reactive.

Did not help rewriting component to class ListItem with @observer
https://github.com/observer decorator.

Now I use the toJS() hack to move on but hope to understand what's going
on.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
#75 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/ABvGhIO4c045LnI0Bb_-EqtiUODheou9ks5qRSyGgaJpZM4JDBlq
.

[dacz]

No problem at all, Michel! No inconvenience at all.

I saw in another thread that you will have speech… good luck with it| MobX is great and I believe that it will spread like a fire. It should.

Thank you.

[mweststrate]

I just looked through your code briefly. Is there a specific reason that you use extendObservable instead of assigning a new object to observable? Note that MobX will not react to introducing new properties to existing objects, see: https://github.com/mobxjs/mobx/blob/gh-pages/docs/best/react.md#incorrect-using-not-yet-existing-observable-object-properties. But since your data object doesn't really seem dynamic, I think the issue can be solved by simply assigning a new object to this.data

[dacz]

It's true that the data now are either empty or loaded. But the project will introduce the create/edit/save capability of new artworks and I plan to use the same code.

I'll look into asMap more deeply. Thanks for your time!