今天的 React 编码挑战：构建货币转换工具

Source: Dev.to

为什么我选择货币转换器

货币转换器是 React 初学者和中级开发者的完美小项目。它们涉及：

• 动态处理用户输入
• 管理多个状态变量
• 从外部 API 获取数据
• 有条件地显示结果
• 优雅地处理错误

我想要一个项目，能够促使我使用 useState 和 useEffect，并且以干净且符合 React 思想的方式处理异步数据获取。

我的实现方式

我先创建了一个用于输入金额的简单输入框，然后添加了两个下拉框，用于选择要转换的源货币和目标货币。主要逻辑由 Frankfurter API 提供支持，该 API 简单且免费，适合测试货币转换。

React 组件跟踪多个状态变量：

const [amount, setAmount] = useState(0);
const [optionA, setOptionA] = useState('USD');
const [optionB, setOptionB] = useState('EUR');
const [result, setResult] = useState(null);
const [error, setError] = useState(null);

使用 useEffect，我在金额或所选货币变化时触发请求。如果 API 成功返回，我更新结果；如果出现错误（例如，两侧下拉框选择了相同的货币），则显示友好的错误信息。

这个小逻辑循环帮助我更好地理解了 条件渲染、API 错误处理 和 React 响应式编程。

关键收获

• React Hooks 实战：useState 与 useEffect 同时使用感觉自然，但需要仔细处理依赖项。
• API 获取与错误处理：始终检查响应是否有效，并处理边缘情况。
• 条件 UI 渲染：根据应用状态显示结果或错误信息，使 UI 更友好。
• 组件设计：即使是小项目，也要考虑代码的清晰和可维护性。

可改进之处

我有意没有专注于打磨 UI 或添加额外功能——因为我希望这个项目能成为他人的起点。如果你想进行改进，可以考虑：

• 在用户输入时实时转换
• 在获取数据时显示加载动画
• 使用更好的样式和响应式设计提升 UX/UI
• 动态支持所有货币，而不是硬编码选项

这是一块学习的练习场，欢迎你 fork、实验并让它成为你的作品。

查看项目

如果想看到实时项目或查看代码，已在 CodeSandbox 上提供：

React Currency Converter Challenge