我想将输入的值作为路由参数发送到服务器。我应该编写一个函数来编码这些值吗？我试图在没有任何库的情况下完成这个。

巧合的是，我误输入了localhost 8000，然后浏览器将localhost 3000的URL附加到8000上，然后才能使用set Search Params，并且我确实将这些值附加到了路由参数上，但服务器的URL显然不正确。

这是我的代码：

import axios from 'axios';
import React, { useState } from 'react';
import { useSearchParams } from 'react-router-dom';

const AddProductForm = ({ id }) => {
  let [searchParams, setSearchParams] = useSearchParams();
  const [input, setInput] = useState({
    title: '',
    price: '',
    rating: '',
    description: '',
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    setSearchParams(input)
    axios
      .put(`http://localhost:8080/api/v1/products/${id}?` + searchParams)
      .then((res) => console.log(res))
      .catch((err) => console.log(err));
  };

  const onChange = (e) => {
  //function to handle change of each input
   }

  return (
    

      

        

          
Edit Product
          

            Add new title
            
          
          

            Add new price
            
          
         //All other inputs
        
          Create
        
      
    
  );
};

export default AddProductForm;

提交时，我只得到空对象URLSearchParams{}