Mobx 不更新数组中的更改

Question

我在更新数组时无法让 MobX 呈现。这是代码的简化版本：

import React, { useState } from 'react'
import { flow, makeObservable, observable } from 'mobx'
import { observer } from 'mobx-react'

import { ResourceList } from './ResourceList'
import { ResourceItem } from './ResourceItem'


export const View = observer(() => {
    const [{
        items,
    }] = useState<MyState>(new MyState())

    return <ResourceList items={items} />
})


export class MyState {
    constructor() {
        makeObservable(this)
        this._fetch()
    }

    @observable public items: ResourceItem[] = []

    private _fetch = flow(function* (this: MyState) {
        const items = yield fetchItems('myitems')
        this.items = items
    })
}

如您所见，我正在尝试使用 <ResourceList items={items} /> 中的数组，但它不起作用。

奇怪的是，如果我像这样破坏数组就可以工作<ResourceList items={[...items]} />

如果我只是 console.log 数组的属性，

也有效：

console.log(items.length)
return <ResourceList items={items} />

所以看起来 Mobx 确实不理解标记中使用的数组。

解决这个问题的正确方法是什么？难道我不应该在状态 class 中配置一些东西来实现它吗？

谢谢

Answer 1

这在文档的 Understanding reactivity 部分进行了讨论。当您编写 items 时，您并没有取消引用 items 数组的属性，因此您的 View 观察器组件不会跟踪 items 数组。您可以 slice 数组或像您在示例中那样展开它。

<ResourceList items={items.slice()} />

您还想借助提供给 useState 的函数创建一次 MyState 实例，这样您就不会在每次渲染时都创建 class 的实例你不使用，那会使网络不堪重负。

const [{ items }] = useState<MyState>(() => new MyState());

Mobx 不更新数组中的更改

Mobx not updating to changes in array

reactjs

typescript

mobx