Next.js：如何基于Fetch请求结果重定向用户至站内其他页面

现有代码问题 #

你的代码存在几个关键问题，会导致功能异常或难以排查错误：

1. 在异步事件处理函数里调用useRouter()，违反React Hooks规则（Hooks必须在组件顶层调用）
2. 未处理API请求失败的情况（比如网络错误、API返回错误状态码）
3. 未校验返回结果里的area字段，可能导致路由跳转失败
4. catch块为空，出问题时无法定位原因

修正后的完整代码 #

import { useRouter } from 'next/router';
import styles from './YourComponent.module.css'; // 替换成你的样式文件路径

const PostCodeForm = () => {
  // 必须在组件顶层调用useRouter，符合Hooks规则
  const router = useRouter();

  const submitPostCode = async (event) => {
    event.preventDefault();
    try {
      // 去除输入前后空格，避免无效请求
      const postCode = event.target.postCode.value.trim();
      if (!postCode) return;

      const res = await fetch(`https://api.postcodes.io/postcodes/${postCode}`);
      
      // 处理API返回的错误状态（比如404、400）
      if (!res.ok) {
        const errorData = await res.json();
        throw new Error(errorData.error || '邮政编码查询失败');
      }

      const result = await res.json();
      
      // 校验返回结果是否包含有效area字段
      if (!result?.area) {
        throw new Error('未获取到有效的区域信息');
      }

      // 跳转到目标页面，await确保跳转完成（可选）
      await router.push(`/some-path/${result.area}`);
    } catch (e) {
      // 这里可以添加用户可见的错误提示（比如Toast）
      console.error('提交失败:', e.message);
      // 示例：设置错误状态展示给用户
      // setError(e.message);
    }
  };

  return (
    <form onSubmit={submitPostCode}>
      <input
        className={styles.inputfield}
        type="text"
        id="postCode"
        name="postCode"
        placeholder="请输入您的邮政编码"
        required
      />
      <button type="submit" className={styles.findMyAddressBtn}>
        查询地址
      </button>
    </form>
  );
};

export default PostCodeForm;

核心优化点 #

• Hooks规则修正：把useRouter()移到组件顶层，符合React Hooks的调用规范
• 输入校验：添加trim()处理输入，避免空格导致的无效API请求
• API错误处理：通过res.ok判断请求是否成功，捕获并处理API返回的错误信息
• 结果校验：用可选链result?.area确保字段存在，防止因数据缺失导致路由跳转失败
• 错误反馈：在catch块中输出错误日志，可扩展为用户可见的提示（比如弹窗或文字提示）

内容的提问来源于stack exchange，提问作者Ayo Adesina