Mobx没有更新的变化在数组

如何解决Mobx没有更新的变化在数组

我有麻烦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不理解的是，在标记所使用的数组项。

什么是解决这一问题的正确方法？是不是应该有状态类里面的东西我进行配置，以便做到这一点？

谢谢

解决方法

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

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

您还想在赋予 MyState 的函数的帮助下创建一次 useState 实例，因此您不必在每次不使用的渲染时都创建该类的实例，这将使网络不堪重负。

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