带参数的 Mobx @compulated 函数

2024-01-09

我是 Mobx 的新手,但到目前为止,它运行良好,并且我已经取得了很大的进展。我有一个带有 mobx 的反应本机应用程序,并且 mobx-persist 。我正在使用 axios 从 Wordpress 网站提取帖子。我试图改进的功能是“添加到收藏夹”功能。

这是我的 PostStore:

export default class PostsStore {

// Define observables and persisting elements
@observable isLoading = true;
@persist('list') @observable posts = [];
@persist('list') @observable favorites = [];

// Get posts from Wordpress REST API
@action getPosts() {
  this.isLoading = true;
  axios({
    url: 'SITE_URL',
    method: 'get'
  })
    .then((response) => {
      this.posts = response.data
      this.isLoading = false
    })
    .catch(error => console.log(error))
}

// Add post to favorites list, ensuring that it does not previously exist
@action addToFavorites(id) {
  if (this.favorites.indexOf(id) === -1) {
    this.favorites.push(id);
  }
}

// Remove post from favorites list, ensuring that it does indeed exist
@action removeFromFavorites(id) {
  if (this.favorites.indexOf(id) !== -1) {
    this.favorites.remove(id);
  }
}

}

在我的收藏夹组件中,该组件旨在呈现一个用于添加或从收藏夹中删除的按钮,我认为最好使用 @compulated 函数来确定当前呈现的帖子是否具有已添加到的“id”可观察的“收藏夹”数组。然而,似乎 @compulated 函数不允许接受参数(最小参数是帖子的“id”,以评估它是否在收藏夹可观察数组中。我可以使用 @action 完成测试,但事实并非如此)似乎目标是立即更新渲染的屏幕。如下面的代码所示,我被迫在组件渲染中使用“if”语句执行测试。

render () {
  if (this.props.postsStore.favorites.includes(this.props.item.id)) {
    return (
      <Button
        onPress={() => this.props.postsStore.removeFromFavorites(this.props.item.id)}
        title="★"
      />
    )
  }

这会影响我的应用程序的性能吗?有没有@compated 的方法来做我想做的事?既然它有点起作用,我应该不担心这个吗?


这样做有效:

@computed get isFavorite() {
   return createTransformer(id => this.favorites.includes(id))
}

在我看来,这样称呼:

this.props.postsStore.isFavorite(this.props.item.id)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

带参数的 Mobx @compulated 函数 的相关文章

随机推荐

  • mvc 3会话和authorizeAttribute

    我的网站对所有人开放 但我有一个控制器 其中有某种方法 只有具有用户名和密码的管理员才能输入 我正在拯救布尔IsManager in a session 我想使用授权属性来阻止任何人IsManager false 首先定义一个ActionF
  • 以编程方式导航时,Angular Router 旧组件保留在 dom 中

    角度版本 4 从登录后LoginComponent 位于public signin路线 我想导航到TestComponent在路径中public test 我这样做如下 this router navigate public test 然后
  • CSS - 三个可滚动等高主要内容列(流体高度)和粘性/始终可见的页脚

    我几乎浏览了这里和 Google 上的所有帖子 似乎找不到关于 3 个等高列 带有 真正 粘性页脚 的 CSS 布局问题的答案 布局要求如下 顶部标题部分 其中一行用于下拉菜单选项 另一行用于工具栏按钮 主要内容部分 有 3 个等高的列 中
  • Javascript 相当于 Python 的 locals() 吗?

    在Python中 我们可以使用内置函数获取当前范围内所有局部和全局变量的字典locals and globals 在 Javascript 中是否有一些等效的方法可以做到这一点 例如 我想做如下的事情 var foo function al
  • 使用值和引用参数类型重载的方法

    我有以下代码 class Calculator public int Sum int x int y return x y public int Sum out int x out int y x y 10 return x y class
  • d3:画笔更改单击鼠标悬停

    我正在尝试结合画笔选择 工具提示和单击事件来创建散点图 但似乎一旦我将画笔添加到 svg 画布 对象上的所有单击事件都会映射到鼠标悬停 有没有办法解决 下面的示例代码和 http jsfiddle net 7j8cr http jsfidd
  • 端口 7071 不可用。关闭使用该端口的进程,或使用 --port [-p] 指定另一个端口

    我尝试从本地运行 azure 函数应用程序 Http Triggerd API 使用 VS 代码 但我收到错误 端口 7071 不可用 使用该端口关闭进程 或使用 port p 指定另一个端口 我使用cmd提示符检查了使用的端口列表 但是7
  • 如何将 NSUInteger 转换为 NSString?

    你如何转换NSUInteger进入一个NSString 我已经尝试过但是我的NSString一直返回0 NSUInteger NamesCategoriesNSArrayCount self NamesCategoriesNSArray c
  • 从命令提示符或 PowerShell 调用 MSYS2 Shell

    从命令提示符或 PowerShell 开始 两者都可以 我可以弄清楚如何执行另一个给定的操作 如何调用 MSYS2 shell 来运行命令 更具体的问题 我包含此信息是为了避免 XY 问题 但我坚信最好通过回答上述 更一般的 问题来解决这个
  • 外部函数调用不同的包注意

    我正在准备一个 R 包以提交给 CRAN R CMD 检查给了我以下注释 外部函数调用不同的包 Fortran cinc 包 cmprsk Fortran crstm PACKAGE cmprsk 看 Writing R 的 系统和外语界面
  • 从 C# LINQ 解析 XML 时如何保留空白字符

    我需要在 C 代码或 XML 文档中做什么 以便 XDocument 解析器读取文字空白Values of XElements Background 我有一个 XML 文档 其中一部分如下所示
  • $settings 数组或 Config 类来存储项目设置?

    我应该如何存储项目设置 哪个更好 使用 settings包含我所有设置的数组 settings max photos 30 或创建一个单例Config类中包含所有设置 Class Config private max photos 30 有
  • linux top 显示java线程?

    在Linux服务器 fedora 中 我们运行单个JBOSS应用程序服务器 并使用quartz来调度我们的任务 昨天 我使用 top 命令来查看进程状态 查看多个名为Java显示不同的pid 但是如果我使用 ps aux grep java
  • 在滚动条到达底部之前执行 100px 的操作

    我有下面的 Javascript 当滚动条到达页面底部时 警报就会按预期显示 但是 我希望这发生在 100 像素处before它到达底部 我该怎么做呢 window scroll function if window scrollTop d
  • Glide:如何查找图像是否已缓存并使用缓存版本?

    Scenario 我有一个大的 GIF 图像 我想在用户第一次使用它打开应用程序时缓存该图像Glide https github com bumptech glide 图像加载和缓存库 之后 每当用户打开应用程序时 我想显示缓存的版本 如果
  • 核心数据:如何将自定义对象存储为可转换属性?

    目前我有一个名为 Place 的类 定义如下 class Place let name String let address String let coordinate CLLocationCoordinate2D let type Str
  • 使用 jquery 将解析后的文本转换为整数

    我当前正在解析一个 XML 文件 其中一个字段是一个整数 用于确定对象的大小 xml find Boxes each function var top box find top text 然后用 HTML 显示它 var html div
  • 使用增量主键sql插入多行

    INSERT INTO TABLE1 COLUMN1 PRIMARY KEY SELECT COLUMN1 SELECT COALESCE MAX PRIMARY KEY 0 FROM TABLE1 1 FROM TABLE2 error
  • 使用 Roslyn 获取引用程序集中的接口实现

    我想在我正在开发的框架中绕过一些经典的程序集扫描技术 因此 假设我定义了以下合同 public interface IModule 这存在于说Contracts dll 现在 如果我想发现该接口的所有实现 我们可能会执行类似于以下的操作 p
  • 带参数的 Mobx @compulated 函数

    我是 Mobx 的新手 但到目前为止 它运行良好 并且我已经取得了很大的进展 我有一个带有 mobx 的反应本机应用程序 并且 mobx persist 我正在使用 axios 从 Wordpress 网站提取帖子 我试图改进的功能是 添加