2

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} />;
  });
};
elisciandrello
  • 107
  • 10

1 Answers1

2

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)} />;
  });
};
Danila
  • 15,606
  • 2
  • 35
  • 67
  • Thank you for the help with this. toJS will need to be passed through to any other components that read this data as well correct? Say a Form or just any other component that will be using my MobX observable as a data source? – elisciandrello Oct 23 '20 at 17:45
  • 1
    Only components that does not use `useObserver` or `observer` decorator. Basically most of the third party components, like AntD table and so on. You can just try without it at first, and if it does not work use `toJS`. Later you will know what works and what not – Danila Oct 23 '20 at 20:16