我试图用表单输入字段提交的数据更新API的获取URL参数，但我不知道如何操作。
更具体地说，我正在使用ipify地理位置API，需要使用用户提交的IP地址更新获取URL。我目前只是将用户输入存储为状态变量userIp，我想将其传递到API获取URL中。
我是react和nextjs的新手，似乎不知道该搜索什么来帮助我理解这一点，我能找到的所有教程都没有涵盖这一点。任何帮助将不胜感激
api/ip.js

export default async function handler(req, res) {
  const ip = "" // placeholder, this should be value of userIp on index.js
  const url = `${process.env.IPIFY_URL}apiKey=${process.env.IPIFY_API}&ipAddress=${ip}`
  
  const data = await fetch(url)
  .then(res => res.json())

  res.json(data); 
}

字符串
index.js

import { useState } from "react"

const home = () => {

  const [info, setInfo] = useState([])
  const [userIp, setUserIp] = useState('') // user input ip address

  const handleSubmit = (e) => {
    e.preventDefault()
    fetchIp()
  };

  const fetchIp = async () => {
    const response = await fetch('/api/ip')
    const data = await response.json()
    setInfo(data)
  }

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          name="IP"
          value={userIp}
          onChange={(e) => setUserIp(e.target.value)}
        />
        <button type="submit">
          Submit
        </button>
      </form>

      <p>{info.ip}</p>
      <p>{info.location?.city}</p>
    </>
  );
}

export default home;

型