antd pro关于 drawer 使用的一些思考

Posted 2022-12-07 一百个Chocolate

背景

一次线上更新抽屉组件数据更新失败，然后梳理一下原因。

介绍页面

大概页面如下，打个码，会有好多个类似的 card，每个 card 里面就是一个表单项，现在的交互是每编辑一个输入框的时候，只要鼠标移出去就更新信息，那么，我这个表单里面有 9 个输入框，那么我每改一个，就会向后端请求一次接口。

默认情况下，我创建一条信息表单之后，会直接打开这个抽屉，然后填充数据，此时上图中的表单信息还没有，收到的数据为 null。

此时，我在这几个输入框输入几个数据，会发现有重复创建的报错。

此时，将页面刷新一下，会发现填的几个数据，就第一次输入的更新成功了，其它输入没有成功。

但是在刷新之后，提交编辑又可以了，啊这…

很奇怪…

解决问题

在自己调试与后端同学的帮助下，发现了问题所在：

首先，为什么会重复创建问题。

因为第一次请求的时候是不需要传递那个表单对应的 id 的，所以更新是不会有问题的，而第二次更新输入，没有提交 id，后端会以为是继续新增，所以会报重复创建错误。

而刷新之后只显示一个数据也和上面同理。

那么，为什么刷新之后为什么又可以编辑了呢。

原因是后端是这样的逻辑，第一次新增的时候不需要传 id，因为后端那边还没有一个对象存储，当我新增一次之后了，就会返回给我一个这个存储块的 id。

所以，从第二次编辑的时候就是更新操作了，我们必须知道这个 id 才能找到我们要更新的地方嘛。

刷新之后，其实就是重新请求了一下 id，所以没问题，之后的更新都会带上 id。

解决方式

我也尝试去通过依赖来重新请求一下，不过页面些许复杂，而在这个抽屉里面，其实我是通过循环写的，每个区域对应一个后端接口，大概有 4-5 个样子。

其实主要问题就是前端不太好处理当前是否是新增还是更新操作，后端加一层逻辑判断就好了，自己数据库里面有 id 的时候帮我携带这个 id 就行，没有的话就代表第一次请求，是「新增」操作。

原来的逻辑：

其实这个页面是重构的，之前的前端处理方式就很明确，每个区域不是放在一起的，假设我现在有 4 个表单信息，都放在整个抽屉里面，每编辑一个输入框就会请求接口更新或者新增。

而之前的话是放在 4 个 tab 里面的，每个 tab 是整体进行更新的，会有一个编辑按钮，点击编辑所有输入框才可以编辑，编辑完之后再点击「更新」按钮即可，这样就不会出现我这个问题。

当第一次编辑的时候没有 id，然后提交之后就有 id 了，下次再编辑的时候会先获取一下信息，就可以从中获取 id 了。

而我现在前端的交互如果在新增之后再获取一下 id 的话，整个抽屉内容可能都会进行更新，这渲染力度太大了，既然后端一个逻辑判断的事儿那就交给后端做吧（逃~