ant.design 表未更新

Question

Trying to use this component https://ant.design/components/table/

I've put together a simple example here https://codesandbox.io/s/loving-hopper-wly0x

I expect to see a spinner instead of a link when I click on "Reload" action, but I only see console.log being printed.

Actually it came out to be even worse than I have locally with Mobx as a data-layer - there I have to move the cursor away from the row or back to see the changes. Here on codesandbox I can't see the changes at all.

Answer 1

You're mutating the data , which does not force your Table to re-render. Your example will work if you add this.forceUpdate() before and in the end of setTimeout . This is ugly fix, but it might help to understand the root case.

Better solution is to extract actions into own component with own loading state:

const Actions = props => {
  const [loading, setLoading] = useState(false);
  return (
    <span>
      {loading ? (
        <Icon type="loading" spin />
      ) : (
        <a
          href="#"
          onClick={() => {
            setLoading(true);
            setTimeout(setLoading, 2000);
          }}
        >
          Reload
        </a>
      )}
    </span>
  );
};

And then your actions column become:

    <Column
      title="Action"
      key="action"
      render={(text, record) => <Actions />}
    />

Answer 2

这是一个棘手的问题，对我有用的是在执行更新表的操作之前延迟 1000 毫秒