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 确实不理解标记中使用的数组 ins。

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

谢谢

Answer 1

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

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

您还希望MyState借助给定的函数创建一次实例useState，这样您就不会在每次不使用的渲染时创建该类的实例，这会压垮网络。

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