MobX-在商店构造函数中使用fromPromise承诺的可观察值在另一个商店中访问时保持为空吗? [英] MobX - Observable value promised in a store constructor using fromPromise stays null when accessed in another store?

问题描述

所以我有2个商店，一个AuthorStore:

So I have 2 stores, an AuthorStore:

class AuthorStore {
  constructor() {
      // has author.name and is always present in storage
      AsyncStorage.getItem('author').then(action((data) => {
        this.author = JSON.parse(data);
      }));
  }

  @observable author = null;
}

和BookStore:

import AuthorStore from 'authorStore';
class BookStore {
  @observable book = {
    authorName: AuthorStore.author.name,
    bookTitle: null
  }
}

我在BookStore中不断收到错误消息，说它无法获得null的属性，就像AuthorStore.author.name为null一样.因此，它将从AuthorStore读取默认的author值，而无需构造函数先运行为其分配值.

I keep getting an error in BookStore that it cannot get property of null, as if the AuthorStore.author.name is null. So it's reading the default author value from the AuthorStore without the constructor running first to assign it the value.

我遇到了新的mobx-utils fromPromise，如果它存在于本地存储中，我认为它将获得author值，并等待AsyncStorage将其分配给可观察的author，因此它可以被其他商店调用而无需null.

I came across the new mobx-utils fromPromise which I think would get the author value if it exists in local storage, and wait for AsyncStorage to assign it to the author observable, so it can be called from another store without being null.

我尝试先在AuthorStore中使用fromPromise记录author值，但是在控制台中它显示为undefined，在BookStore中通常显示null错误AuthorStore.author部分.

I tried using fromPromise first in the AuthorStore to log the author value, but it shows as Got undefined in console, and the usual null error in the BookStore when it comes to the AuthorStore.author part.

更新:

class AuthorStore {
  @observable author = null;

  @computed get theAuthor() {
    authorPromise = fromPromise(AsyncStorage.getItem('author').then(data => JSON.parse(data)));

    // combine with when..
    when(
      () => authorPromise.state !== "pending",
      () => {
        console.log("Got Author", authorPromise.reason || authorPromise.value) // This runs, and returns author
        console.log("Got Name", authorPromise.reason || authorPromise.value.name) // This runs, and returns name
        return authorPromise.value; // This doesn't get returned in BookStore when calling this computed
      }
    );
  }
}

class BookStore {
  @observable book = {
    authorName: AuthorStore.theAuthor.name, // doesn't get computed returned value from promise
    bookTitle: null
  }
}

如何获取由AuthorStore计算函数theAuthor分配的fromPromise值，以将承诺的authorPromise值返回到authorName下的BookStore中?

How can I get the fromPromise value assigned by the AuthorStore computed function theAuthor to return the promised authorPromise value into BookStore under authorName?

推荐答案

FromPromise创建一个包装原始诺言的新对象.因此，您的authorFromStorage只是示例中的常规承诺，根本没有state属性.因此，您应该将代码更改为:

FromPromise creates a new object wrapping the original promise. So your authorFromStorage is just a normal promise in your example, not having a state property at all. So you should change your code to:

authorPromise = fromPromise(AsyncStorage.getItem('author').then(data => JSON.parse(data)))

然后是when(() => authorPromise.state !== "pending")等.

**更新**

class AuthorStore {
  @observable author = null;

  constructor() {
    AsyncStorage.getItem('author').then(data => { this.author = JSON.parse(data) });
  }
}

class BookStore {
  @observable book = {
    authorName: function() {  // a function in an observable creates a computed prop
      return AuthorStore.author && AuthorStore.author.name
    },
    bookTitle: null
  }
}

这篇关于MobX-在商店构造函数中使用fromPromise承诺的可观察值在另一个商店中访问时保持为空吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！