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

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，保证之后不会再出现此类问题
• 现有项目逐一修改

tags: Ant Design Pro

关于作者 🌱

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