时间戳

首页 > 解决方案 > Mobx 未更新数组中的更改

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

解决此问题的正确方法是什么？它不应该有我在状态类中配置的东西所以让它发生吗？

谢谢

标签： reactjstypescriptmobx

解决方案

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

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

您还希望MyState借助给定的函数useState创建一次实例，因此您不会在每次不使用的渲染时都创建该类的实例，这会使网络不堪重负。

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

推荐阅读