таблица ant.design не обновляется

Question

Пытаясь использовать этот компонент https://ant.design/components/table/

Я собрал простой пример здесь https://codesandbox.io/s/loving-hopper-wly0x

Я ожидаю, что при нажатии на действие «Перезагрузить» вижу спиннер вместо ссылки, но я вижу только печать console.log.

На самом деле все оказалось еще хуже, чем у меня локально с Mobx в качестве данных. слой - там я должен переместить курсор от строки или назад, чтобы увидеть изменения. Здесь, на codesbox, я не вижу изменений вообще.

Answer 1

Вы мутируете data, что не заставляет ваш стол перерисовываться. Ваш пример будет работать, если вы добавите this.forceUpdate() до и в конце setTimeout. Это некрасивое исправление, но оно может помочь понять случай root.

Лучшее решение - извлечь действия в собственный компонент с собственным loading состоянием:

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

И затем столбец ваших действий становится:

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