对象中的属性更新后，MobX 对象数组不会重新渲染答案

【问题标题】：MobX array of object is not re-rendering after a property in object is update对象中的属性更新后，MobX 对象数组不会重新渲染
【发布时间】：2021-03-11 07:45:28
【问题描述】：

此组件呈现一个包含 1 个值为“A”的单元格的表格。

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

目前，当我单击“添加字符”按钮 2 次时，我可以通过 onClickAddCharacter() 中的 console.log 看到名称的值从“A”变为“ABB”。但是，正在呈现的表格并没有反映这个“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} />
            </>
        );
    }
}

【问题讨论】：

这能回答你的问题吗？ mobx-react observer don't fires when I set observable
它没有。是否应该重新渲染？或者有什么我想念的
如果你使用的是mobx6那么你需要在构造函数中调用makeObservable，否则它不会重新渲染
我正在使用 MobX 5，所以它应该重新渲染嘿？

标签： reactjs mobx

【解决方案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} />
            </>
        );
    }
}

【讨论】：