更新对象中的属性后，对象的 MobX 数组不会重新呈现

Question

此组件呈现一个 table，其中 1 个单元格的值为“A”。

单击“添加字符”按钮后，如何让我的 table 对 this.value[0].name 的值变化做出反应？

目前，当我点击添加字符按钮 2 次时，我可以通过 onClickAddCharacter() 中的 console.log 看到名称的值从“A”变为“ABB”。但是，呈现的 table 并没有反映这个“ABB”新值，而是仍然是“A”。奇怪的是，如果我在 render() 中取消注释 console.log 并单击“添加字符”按钮一次，单元格值将从“A”重新呈现为“AB”。

这里发生了什么，我做错了什么？

谢谢！

编辑：我正在使用 MobX 5

import Button from 'main/component/Button';
import {action, observable} from 'mobx';
import {observer} from 'mobx-react';
import {Column} from 'primereact/column';
import {DataTable} from 'primereact/datatable';
import React from 'react';

@observer
class Component extends React.Component
{
    @observable
    private value = [{ name: 'A' }];

    @action.bound
    private onClickAddCharacter()
    {
        this.value[0].name += 'B';
        console.log(this.value);
    }

    render()
    {
        // If uncomment, the cell value will re-render from "A" to "AB"?
        // console.log(this.value);
        return (
            <>
                <DataTable value={this.value}>
                    <Column header='Name' field='name' />
                </DataTable>
                <Button title='Add character' onClick={this.onClickAddCharacter} />
            </>
        );
    }
}

Answer 1

因为来自 primereact 的 DataTable 本身不是观察者，所以在将数据传递给 DataTable 之前，您需要对数据使用 toJS MobX 方法。

import { toJS } from "mobx";

// ...

@observer
class Component extends React.Component
{
    @observable
    private value = [{ name: 'A' }];

    @action.bound
    private onClickAddCharacter()
    {
        this.value[0].name += 'B';
        console.log(this.value);
    }

    render()
    {
        return (
            <>
                <DataTable value={toJS(this.value)}>
                    <Column header='Name' field='name' />
                </DataTable>
                <Button title='Add character' onClick={this.onClickAddCharacter} />
            </>
        );
    }
}

更新对象中的属性后，对象的 MobX 数组不会重新呈现

MobX array of object is not re-rendering after a property in object is update

reactjs

mobx

更新对象中的 属性 后，对象的 MobX 数组不会重新呈现

MobX array of object is not re-rendering after a property in object is update

reactjs

mobx

更新对象中的属性后，对象的 MobX 数组不会重新呈现