MobX ReactJS AntD 更新不会重新渲染

Question

所以我正在尝试使用 ReactJS 和 MobX 更改我的 AntD 表中的一些表数据。我的 MobX observable 中的数据发生了变化，但表格不会重新呈现更新，直到我说......调整页面大小并且表格重新呈现。我在 CodeSandbox 上重新创建了我的问题 - 它不是确切的数据类型，但这是我遇到的确切问题，有什么想法吗？？？

https://codesandbox.io/s/remove-items-from-mobx-array-forked-3nybr?file=/index.js

  @action
  change = (key) => {
    this.data
      .filter(item => key === item.key)
      .forEach(piece => {
        piece.key = 10;
      });
    console.log(this.data);
  };

const FooTable = () => {
  const columns = [
    {
      title: "ID",
      dataIndex: "key"
    },
    {
      title: "Name",
      dataIndex: "name"
    },
    {
      title: "Last Name",
      dataIndex: "lastName"
    },
    {
      title: "Actions",
      render: (text, record) => {
        return (
          <Button
            type="link"
            icon="delete"
            onClick={() => tableStore.change(record.key)}
          >
            Delete
          </Button>
        );
      }
    }
  ];
  return useObserver(() => {
    return <Table columns={columns} dataSource={tableStore.data} />;
  });
};

Answer 1

因为 AntD Table 本身不是观察者，所以在将数据传递给 AntD 之前，您需要在数据上使用 toJS。

import { toJS } from "mobx";

// ...

const FooTable = () => {
  const columns = [ ... ];

  return useObserver(() => {
    return <Table columns={columns} dataSource={toJS(tableStore.data)} />;
  });
};