Next.js货币转换器输入无效时无错误提示问题求助

问题描述 #

开发的货币转换器在输入数字时功能正常，但用户输入非数字内容或留空输入框时，点击转换按钮仍会发起无效请求（控制台可见类似GET http://localhost:3000/api/convert?convertFrom=ANG&convertTo=ANG&amount=的请求），且无任何错误提示反馈给用户。

问题根源 #

1. 输入框为不受控组件，父组件无法准确感知输入有效性，点击按钮时直接使用当前输入值发起请求
2. 仅在输入变化时做了校验，但未在提交（点击转换）环节二次校验，导致无效请求依然发送
3. 校验后的错误信息未在页面上展示，用户无法得知输入问题

修复方案 #

1. 完善Input组件（受控绑定+实时错误提示） #

修改input.js，将输入框改为受控组件，并添加错误信息展示：

import React, { useState } from 'react';

const Input = ({ dropdown, onChange, label, symbols, value }) => {
  const arrOfSymbols = Object.keys(symbols);
  arrOfSymbols.sort();

  const [error, setError] = useState('');

  const handleInputChange = (e) => {
    const inputValue = e.target.value;
    // 输入有效性校验
    if (inputValue.trim() === '' || isNaN(inputValue)) {
      setError('请输入有效的数字。');
    } else {
      setError('');
    }
    // 同步输入值到父组件
    onChange(inputValue);
  };

  return (
    <div className="input-container">
      {/* 渲染实时输入错误 */}
      {error && <p style={{ color: '#dc2626', margin: '4px 0 8px', fontSize: '0.875rem' }}>{error}</p>}
      <input 
        type="number" 
        placeholder="输入要转换的金额" 
        className="px-4 py-2 rounded-xl border border-gray-300" 
        onChange={handleInputChange} 
        value={value}
      />
      {/* 保留原组件的dropdown相关代码 */}
      {dropdown && (
        <select className="mt-2 px-4 py-2 rounded-xl">
          {arrOfSymbols.map(symbol => (
            <option key={symbol} value={symbol}>{symbol}</option>
          ))}
        </select>
      )}
    </div>
  );
};

export default Input;

2. 父组件转换函数添加提交校验 #

修改index.js中的convertCurrency函数，在发起请求前校验输入有效性，阻止无效请求：

// 假设父组件已声明相关状态：const [amount, setAmount] = useState(''); const [error, setError] = useState(null);
const convertCurrency = () => {
  // 提交前二次校验金额
  if (amount.trim() === '' || isNaN(amount)) {
    setError('请输入有效的数字后再进行转换。');
    return;
  }

  const options = {
    method: "GET",
    url: "http://localhost:3000/api/convert",
    params: { convertFrom, convertTo, amount },
  };

  axios.request(options).then(function (response) {
     const { data } = response;
     setConvertedAmount(data.result);
     setError(null); // 清除之前的错误状态
   }).catch(function (error) {
     console.error(error);
     setError('转换过程中发生错误，请稍后重试。');
   });
};

3. 父组件传递受控属性并展示全局错误 #

在父组件中使用Input时，传入value和onChange，并展示全局错误信息：

<div className="currency-converter">
  <Input 
    symbols={currencySymbols}
    label="转换金额"
    onChange={(val) => setAmount(val)}
    value={amount}
    dropdown={false} // 根据需求设置是否显示下拉
  />
  {/* 其他组件：货币选择下拉等 */}
  <button onClick={convertCurrency} className="mt-4 px-6 py-2 bg-blue-600 text-white rounded-xl">
    转换
  </button>
  {/* 展示提交阶段的错误 */}
  {error && <p style={{ color: '#dc2626', marginTop: '8px' }}>{error}</p>}
</div>

修复效果 #

• 用户输入非数字或留空时，输入框下方会实时显示错误提示
• 点击转换按钮时，若输入无效，会显示全局错误提示且不会发起无效请求
• 输入有效数字后，错误提示自动消失，可正常发起转换请求

内容的提问来源于stack exchange，提问作者Rumeysa Gelgi