Ich möchte den eingegebenen Wert als Routing-Parameter an den Server senden. Soll ich eine Funktion schreiben, um diese Werte zu kodieren? Ich versuche, dies ohne Bibliotheken zu erreichen.

Zufälligerweise habe ich versehentlich localhost 8000 eingegeben, und dann hat der Browser die URL für localhost 3000 an 8000 angehängt, bevor ich set Search Params verwenden konnte, und ich habe diese Werte an die Routenparameter angehängt, aber die URL des Servers hat das offensichtlich nicht getan. Das stimmt nicht.

Das ist mein Code:

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 (
    <div className='container' >
      <form className='form' onSubmit={handleSubmit}>
        <div className='form_inputs'>
          <h1>Edit Product</h1>
          <div className='flex-column'>
            <label>Add new title</label>
            <input
              type='text'
              value={input.title}
              onChange={onChange}
              name='title'
              placeholder='Title'
            />
          </div>
          <div className='flex-column'>
            <label>Add new price</label>
            <input
              type='number'
              value={input.price}
              onChange={onChange}
              name='price'
              placeholder='Price'
            />
          </div>
         //All other inputs
        <button className='btn-block' type='submit'>
          Create
        </button>
      </form>
    </div>
  );
};

export default AddProductForm;

Beim Absenden erhalte ich nur das leere Objekt URLSearchParams{}