应该如何理解mobx_如何使用mobx观察observable数组上的object.property更改

我正在使用reactjs和mobx . 我有一个可观察的Item对象数组，我试图通过观察数组中对象的属性来显示它们并“显示”属性更改 . 更改不是由任何组件上的单击事件触发，而是由对API调用的响应触发 .

我理解数组中对象的属性更改不会触发整个列表重新呈现(这很好)，但我不能让它重新呈现应该观察Item的属性的单个Item组件宾语 .

我已经尝试了几种方法来获取数组中的Item对象是可观察的，但这些方法都不适用于我：

调用'extendObservable() from the Item'的构造函数

将props.item分配给用'@observable'装饰的类成员

调用observable构造函数并传入item对象，如下所示：const item = observable(item)

将'hasUnreadData'字段作为单独的prop传递，并通过'observable.box(item.hasUnreadData)使其可观察 .

这是一些简化的示例代码(在typescript中)：

class Item {

id : string

hasUnreadData : boolean

constructor (data: any) {

this.id = data.id;

// false by default

this.hasUnreadData = data.hasUnreadData;

}

@observable items: Item[];

// observes the array and re-renders when items are added/removed (this works)

@observer

class ItemListComponent extends React.Component {

render() {

return (

{

items.map((item: Item, index) => {

}

)

}

// should observe the 'hasUnreadData' flag and apply different styles when it re-renders (but this does not work, it only displays the initial state)

@observer

class ItemComponent extends React.Component {

render() {

const item = this.props.item;

return (

)

}

// imagine this is a promise from an API call

API.fetchData().then((itemId: string) => {

itemToUpdate = items.find(i => i.id === itemId);

itemToUpdate.hasUnreadData = true;

// this does not trigger the ItemComponent to render again as expected.

});

我是否需要克隆或“重新创建”Item对象以触发渲染？或者我在这里犯了一些明显的错误？任何帮助赞赏 .

应该如何理解mobx_如何使用mobx观察observable数组上的object.property更改相关推荐

彻底理解Toast原理和解决小米MIUI系统上没法弹Toast的问题
彻底理解Toast原理和解决小米MIUI系统上没法弹Toast的问题参考文章: (1)彻底理解Toast原理和解决小米MIUI系统上没法弹Toast的问题 (2)https://www.cnblog ...
深入理解C指针之四：指针和数组
深入理解C指针之四:指针和数组原文:深入理解C指针之四:指针和数组数组是C内建的基本数据结构,数组表示法和指针表示法紧密关联.一种常见的错误认识是数组和指针完全可以互换,尽管数组名字有时可以当做指 ...
#如何理解使用for循环遍历lst与lst[:]，如果使用remove更改列表结果会不同
# 如何理解使用for循环遍历lst与lst[:],如果使用remove更改列表结果会不同 ''' # 基础知识一.lst与lst[:]的区别 lst[:]创建原始列表lst的副本.他们各自的改变不 ...
《深入理解 Java 内存模型》读书笔记（上）（干货，万字长文）
目录 0. 前提 1. 基础 1.1 并发编程的模型分类 1.1.1 通信 1.1.2 同步 1.2 JAVA 内存模型的抽象 2. 重排序 2.1 处理器重排序 2.2 内存屏障指令 2.3 HAP ...
mobx中的数组需要注意的地方
mobx中如果将数组作为可观察. 可以通过添加修饰符observable或者调用observable方法. 很多的时候, 我们将此修饰为可观察的对象后, 就随处可用了. 比如,采用 map forE ...
理解PBR：从原理到实现（上）
PBR 从离线渲染进入游戏引擎 CSDN 博客的公式排版有问题,可以看我的 GitHub Page:https://neil3d.github.io/unreal/pbr-theory.html 基于 ...
最容易理解的计算机网络的基础知识概论（上）
最容易理解的计算机网络基础知识概论(上) 1.计算机网络的分类方法 1)广域网. 2)城域网. 3)局域网. 4)个人区域网和人体区域网. 2.计算机的组成及结构 2.1早期计算机网络组成与结构 3 ...
为什么Vue不能观察到数组length的变化？
官网解释如下由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的 ...
翻译：理解TCP/IP网络栈编写网络应用（上）
1.摘要之前在网上看到了这篇描述tcp网络栈原理的文章,感觉不错,决定抽空把这篇文章翻译一下.一来重新温习一下TCP相关知识,二来练练英文.由于原文太长,这里把文章分成上下两部分,分别对应了原理和代 ...

应该如何理解mobx_如何使用mobx观察observable数组上的object.property更改

应该如何理解mobx_如何使用mobx观察observable数组上的object.property更改相关推荐

最新文章

热门文章