如何将Next.js页面中Nationalize API查询参数改为输入框获取？

你当前用的getStaticProps是Next.js的静态生成逻辑，只能在构建阶段固定获取数据，没法处理用户动态输入的内容，所以需要改成客户端侧的交互请求，具体实现如下：

修改后的完整代码 #

import { useState } from 'react';

const Fetch = () => {
  // 管理用户输入的姓名
  const [inputName, setInputName] = useState('');
  // 存储API返回的结果
  const [nationalizeData, setNationalizeData] = useState(null);
  // 加载状态，给用户反馈
  const [loading, setLoading] = useState(false);

  // 处理查询提交逻辑
  const handleSubmit = async (e) => {
    e.preventDefault();
    // 空输入不发起请求
    if (!inputName.trim()) return;

    setLoading(true);
    try {
      // 用encodeURIComponent处理特殊字符，避免URL格式错误
      const res = await fetch(`https://api.nationalize.io?name=${encodeURIComponent(inputName)}`);
      const data = await res.json();
      setNationalizeData(data);
    } catch (err) {
      console.error('请求出错:', err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <h1>Nationalize</h1>
      {/* 输入表单 */}
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={inputName}
          onChange={(e) => setInputName(e.target.value)}
          placeholder="输入姓名查询国籍"
        />
        <button type="submit" disabled={loading}>
          {loading ? '查询中...' : '开始查询'}
        </button>
      </form>

      {/* 结果展示区域 */}
      {nationalizeData && (
        <div>
          <h4>你输入的是 {nationalizeData.name}，查询结果如下：</h4>
          {nationalizeData.country.map((item) => (
            <div key={item.country_id}>
              <h5>{(item.probability * 100).toFixed(2)}% {item.country_id}</h5>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default Fetch;

关键改动说明 #

• 移除getStaticProps：这个方法是构建阶段执行的，无法获取用户动态输入，完全不适合当前交互场景
• 添加状态管理：用useState分别维护输入值、请求结果和加载状态，实现客户端的交互逻辑
• 表单提交触发请求：通过表单的onSubmit事件发起请求，避免用户输入过程中频繁调用API；同时用encodeURIComponent处理特殊字符，防止URL格式错误
• 优化用户体验：添加加载状态提示，空输入时不发起请求，只有当有数据时才渲染结果区域

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