Antd Pro V5 编辑/新建,数据串了的 bug

更新日期: 2022-03-10 阅读次数: 2764 字数: 345 分类: ReactJS

Bug 现象

在 Antd Pro V5 数据列表页,点击编辑某个条目,去掉某个字段的内容,保存。

再点击新建,还是编辑的上一条信息。

这时点击保存,实际上是覆盖了上一条的信息,而不是新建了一条信息。

这个问题,之前也有发现过,但是一直没有找到复现的方法。一些用户反馈的复现方法也不好使。 这次好不容易发现了重现步骤,看来是 100% 出现的严重 bug,必须修复一下。

问题定位

又试了几种操作流程:

  • 编辑,然后取消,不保存。再点击新建。一切正常,数据没有串。
  • 点击编辑,再编辑另一条。也正常。

猜测是新建条目并保存之后,全局的 currentRow 没有重置。

const [currentRow, setCurrentRow] = useState<API.Item>();

修复方法

<CreateForm
  createFormVisible={createFormVisible}
  values={currentRow || {}}
  onFinish={async (value) => {
    if (value.id) {
      const success = await handleUpdate(value as API.Item);
      if (success) {
        handleFormVisible(false);
        if (actionRef.current) {
          actionRef.current.reload();
        }
      }
    } else {
      const success = await handleAdd(value as API.Item);
      if (success) {
        handleFormVisible(false);
        if (actionRef.current) {
          actionRef.current.reload();
        }
      }
    }
    setCurrentRow(undefined);  // 增加的一行代码,用于重置状态
  }}
  onCancel={() => {
    handleFormVisible(false);
    setCurrentRow(undefined);
  }}
>
</CreateForm>

这样就保险了,测试了一下,确实问题修复了。

批量修复

我一堆项目都有这个 bug,所以只能逐一修改了。

  • 优先修改 vim snippet,保证之后不会再出现此类问题
  • 现有项目逐一修改

微信关注我哦 👍

大象工具微信公众号

我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式

tags: Ant Design Pro