React/Next.js如何通过表单输入值更新API fetch的URL参数

核心问题：Next.js的API路由运行在服务端，和前端组件的状态是完全隔离的，无法直接读取前端userIp状态值，必须在前端发起请求时把IP参数传递给接口，再由接口读取参数拼接第三方请求地址。

1. 修改前端请求逻辑 #

调整index.js中的fetchIp方法，发起请求时把userIp作为查询参数拼接到接口地址上：

const fetchIp = async () => {
  // 传参时用encodeURIComponent转义，避免特殊字符导致URL格式异常
  const response = await fetch(`/api/ip?userIp=${encodeURIComponent(userIp)}`)
  const data = await response.json()
  setInfo(data)
}

2. 修改API路由逻辑 #

在api/ip.js中从请求对象的query字段里读取前端传入的IP值，替换原来的空占位符即可，建议补充基础的参数校验和错误捕获：

export default async function handler(req, res) {
  // 从GET请求的查询参数中取前端传的IP
  const ip = req.query.userIp
  // 参数校验：未传IP时直接返回错误
  if (!ip) {
    return res.status(400).json({ error: "缺少待查询的IP参数" })
  }
  const requestUrl = `${process.env.IPIFY_URL}apiKey=${process.env.IPIFY_API}&ipAddress=${ip}`
  
  try {
    const data = await fetch(requestUrl).then(res => res.json())
    res.status(200).json(data)
  } catch (error) {
    res.status(500).json({ error: "IP信息查询失败" })
  }
}

检索关键词参考 #

后续遇到同类需求可以搜以下关键词找对应教程：

• Next.js API Routes 获取请求参数
• fetch 发起GET请求传递查询参数
• 前后端参数传递方式

注意：不要尝试在服务端代码中直接引入前端组件读取状态，服务端和客户端的运行环境是物理隔离的，所有跨端数据都要通过HTTP请求传递。如果后续要传递敏感信息，把GET请求改成POST，参数放在请求体中，API路由从req.body中取值即可。

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