时间戳

首页 > 解决方案 > ant.design 表未更新

javascript - ant.design 表未更新

问题描述

尝试使用此组件https://ant.design/components/table/

我在这里整理了一个简单的例子 https://codesandbox.io/s/loving-hopper-wly0x

当我单击“重新加载”操作时，我希望看到一个微调器而不是一个链接，但我只看到console.log正在打印。

实际上，它比我在本地使用 Mobx 作为数据层更糟糕 - 我必须将光标从行上移开或移回才能看到更改。在代码沙箱上，我根本看不到更改。

标签： javascriptreactjsantd

解决方案

您正在改变data，这不会强制您的 Table 重新渲染。如果您this.forceUpdate()在setTimeout. 这是一个丑陋的修复，但它可能有助于理解根本情况。

更好的解决方案是将动作提取到具有自己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 />}
    />

推荐阅读