MobX ReactJS AntD updates won't re-render

746 views Asked by At

So I'm trying change some table data within my AntD Table using ReactJS and MobX. The data in my MobX observable changes, but the table doesn't re-render an update until I say.... resize the page and the table re-renders. I've recreated my issue on CodeSandbox - it's not the exact data type, but this is the EXACT issue I'm running into, any thoughts???

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} />;
  });
};
1

There are 1 answers

2
Danila On BEST ANSWER

Because AntD Table is not observer by itself you need to use toJS on your data before you pass it to AntD.

import { toJS } from "mobx";

// ...

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

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