修改代码Bug的步骤
设定身份> 指明BUG > 测试验证(自己手动验证) > 再指明BUG > 验收完成
问题说明
下面是一段有问题的代码,我们尝试让chatGPT帮我们修复。
有BUG的代码在线演示:
https://codesandbox.io/s/you-bugde-cha-xun-biao-ge-deng-dai-chatgptxiu-fu-mje3if
主要的BUG有:
点击[搜索]后没有重置页码再请求数据
点击[重置]没有重置页码,然后请求参数
点击删除需要调用接口(使用mock.js+new Promise 在本地模拟),删除后需要刷新列表
用户手机号input, 不能输入非数字,长度不能超过11位,否则无法输入
调教步骤
第一步:设定身份:指名GPT的身份是前端专家,让它帮我找到并修复BUG。
指令见上面
第二步:不告诉它具体的BUG,让GPT自己找,发现业务上的BUG它无法发现。
下面是一个【用户信息查询】的react代码,你能找到bug吗?
不单单是技术上的bug,还包括业务上的bug,
比如说,用户手机号input, 不能输入非数字,长度不能超过11位,否则无法输入,这个是业务上的bug,你能找到吗?
第三步:机器很难理解业务上的BUG, 给GPT指明具体的BUG,继续让它修复
上面我提供的代码存在以下bug,请修复它
- 点击[搜索]后没有重置页码再请求数据
- 点击[重置]没有重置页码,然后请求参数
- 点击删除需要调用接口(使用mock.js+new Promise 在本地模拟),删除后需要刷新列表
- 用户手机号input, 不能输入非数字,长度不能超过11位,否则无法输入
第四步:发现BUG都修复完了,但是引出了新BUG。所以下面接着让它修复
上面的代码存在以下bug,请修复它
- 当触发 handleChange方法时,handleSearch中获取的current 是旧值,而不是新值。应该使用最新的值。
全程对话+修复后的在线演示地址
最终实现的效果:还是不错的。
由于对话过长,放在下面的链接中,可点击查看。
点击查看修复后的DEMO在线演示