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

发布时间: 2022-03-10 10:24:11 作者: 大象笔记

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,所以只能逐一修改了。

我是一名山东烟台的开发者,联系作者