forked from Kexing/AI4SE_Practices
204 lines
5.4 KiB
Markdown
204 lines
5.4 KiB
Markdown
# Task 2: React组件调试（中等任务）
|
||
|
||
## 任务描述
|
||
|
||
给定一个包含逻辑bug的React表单组件，使用AI工具辅助定位和修复所有bug。
|
||
|
||
### 原始代码
|
||
|
||
提供的React组件包含以下已知问题：
|
||
|
||
1. **表单验证逻辑错误**：邮箱验证正则表达式有误
|
||
2. **状态更新问题**：密码确认字段的状态更新不正确
|
||
3. **表单提交逻辑错误**：未正确阻止默认提交行为
|
||
|
||
### 修复目标
|
||
|
||
- 定位并修复所有bug
|
||
- 确保表单验证逻辑正确
|
||
- 确保表单提交逻辑正确
|
||
- 代码符合React最佳实践
|
||
|
||
## 初始条件
|
||
|
||
- **初始代码**：提供包含bug的React组件代码
|
||
- **项目类型**：React 18 + TypeScript项目
|
||
- **框架**：React 18.x
|
||
- **Node.js版本**：18.17.0+
|
||
- **构建工具**：Vite或Create React App
|
||
|
||
### 原始代码（包含bug）
|
||
|
||
```tsx
|
||
import React, { useState } from 'react';
|
||
|
||
interface FormData {
|
||
email: string;
|
||
password: string;
|
||
confirmPassword: string;
|
||
}
|
||
|
||
const SignupForm: React.FC = () => {
|
||
const [formData, setFormData] = useState<FormData>({
|
||
email: '',
|
||
password: '',
|
||
confirmPassword: ''
|
||
});
|
||
const [errors, setErrors] = useState<Partial<FormData>>({});
|
||
|
||
const validateEmail = (email: string): boolean => {
|
||
// Bug 1: 邮箱验证正则表达式有误
|
||
const emailRegex = /^[^\s@]+@[^\s@]+.[^\s@]+$/;
|
||
return emailRegex.test(email);
|
||
};
|
||
|
||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const { name, value } = e.target;
|
||
|
||
// Bug 2: 状态更新不正确，未使用函数式更新
|
||
setFormData({
|
||
...formData,
|
||
[name]: value
|
||
});
|
||
};
|
||
|
||
const handleSubmit = (e: React.FormEvent) => {
|
||
// Bug 3: 未阻止默认提交行为
|
||
e.preventDefault();
|
||
|
||
const newErrors: Partial<FormData> = {};
|
||
|
||
if (!formData.email) {
|
||
newErrors.email = '邮箱不能为空';
|
||
} else if (!validateEmail(formData.email)) {
|
||
newErrors.email = '邮箱格式不正确';
|
||
}
|
||
|
||
if (!formData.password) {
|
||
newErrors.password = '密码不能为空';
|
||
} else if (formData.password.length < 8) {
|
||
newErrors.password = '密码长度至少8位';
|
||
}
|
||
|
||
if (formData.password !== formData.confirmPassword) {
|
||
newErrors.confirmPassword = '两次输入的密码不一致';
|
||
}
|
||
|
||
if (Object.keys(newErrors).length === 0) {
|
||
console.log('表单提交成功', formData);
|
||
// 实际提交逻辑
|
||
} else {
|
||
setErrors(newErrors);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<form onSubmit={handleSubmit}>
|
||
<div>
|
||
<label>邮箱：</label>
|
||
<input
|
||
type="text"
|
||
name="email"
|
||
value={formData.email}
|
||
onChange={handleChange}
|
||
/>
|
||
{errors.email && <span>{errors.email}</span>}
|
||
</div>
|
||
|
||
<div>
|
||
<label>密码：</label>
|
||
<input
|
||
type="password"
|
||
name="password"
|
||
value={formData.password}
|
||
onChange={handleChange}
|
||
/>
|
||
{errors.password && <span>{errors.password}</span>}
|
||
</div>
|
||
|
||
<div>
|
||
<label>确认密码：</label>
|
||
<input
|
||
type="password"
|
||
name="confirmPassword"
|
||
value={formData.confirmPassword}
|
||
onChange={handleChange}
|
||
/>
|
||
{errors.confirmPassword && <span>{errors.confirmPassword}</span>}
|
||
</div>
|
||
|
||
<button type="submit">注册</button>
|
||
</form>
|
||
);
|
||
};
|
||
|
||
export default SignupForm;
|
||
```
|
||
|
||
### Bug说明
|
||
|
||
1. **Bug 1**: 邮箱验证正则表达式缺少转义字符，`/^[^\s@]+@[^\s@]+.[^\s@]+$/` 应改为 `/^[^\s@]+@[^\s@]+\.[^\s@]+$/`（点号需要转义）
|
||
|
||
2. **Bug 2**: `handleChange`函数中的状态更新看起来没问题，但实际可能存在闭包问题。更好的做法是使用函数式更新。
|
||
|
||
3. **Bug 3**: `handleSubmit`函数中虽然调用了`e.preventDefault()`，但如果AI工具识别不出这个bug，说明工具可能遗漏了此检查。
|
||
|
||
## 验收标准
|
||
|
||
### 功能验收
|
||
|
||
- [ ] 邮箱验证逻辑正确（正确识别有效的邮箱格式）
|
||
- [ ] 表单状态更新正确（所有字段都能正确更新）
|
||
- [ ] 表单提交逻辑正确（阻止默认行为，正确验证和提交）
|
||
- [ ] 错误提示正确显示
|
||
|
||
### 代码质量
|
||
|
||
- [ ] 代码符合React最佳实践
|
||
- [ ] 类型定义正确（TypeScript）
|
||
- [ ] 代码结构清晰，可读性好
|
||
|
||
### 测试验收
|
||
|
||
- [ ] 使用测试工具（如React Testing Library）验证组件功能
|
||
- [ ] 所有边界条件处理正确（如：空值、无效格式、不匹配等）
|
||
|
||
## 测试步骤
|
||
|
||
1. **代码分析**
|
||
- 使用工具分析提供的代码
|
||
- 记录工具识别出的问题
|
||
|
||
2. **Bug修复**
|
||
- 使用工具生成修复方案
|
||
- 记录工具生成的修复代码
|
||
- 记录人工调整的点和原因
|
||
|
||
3. **验证测试**
|
||
- 运行修复后的组件
|
||
- 验证所有功能正确
|
||
- 记录测试结果
|
||
|
||
## 评估要点
|
||
|
||
### Bug定位能力
|
||
|
||
- **准确性**：是否能准确识别所有bug
|
||
- **详细程度**：是否提供详细的bug说明和位置
|
||
|
||
### 修复方案质量
|
||
|
||
- **正确性**：修复方案是否正确
|
||
- **完整性**：是否修复了所有bug
|
||
- **规范性**：修复后的代码是否符合最佳实践
|
||
|
||
### 工具使用体验
|
||
|
||
- **响应速度**：工具分析代码的速度
|
||
- **交互便利性**：需要多少次交互才能完成修复
|
||
|
||
---
|
||
|
||
**注意**：此任务评估工具的调试和问题定位能力。原始代码中可能包含更多细微的bug，鼓励工具识别出所有问题。
|
||
|