MobX ReactJS AntD更新不会重新呈现

如何解决MobX ReactJS AntD更新不会重新呈现

因此，我尝试使用ReactJS和MobX更改AntD表中的某些表数据。 MobX中的数据可观察到的变化，但是在我说....调整页面大小并重新渲染表之前，该表不会重新呈现更新。我已经在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} />;
  });
};

解决方法

由于AntD Table本身不是观察者，因此您需要在数据上使用toJS，然后再将其传递给AntD。

import { toJS } from "mobx";

// ...

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

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