Transmettre les valeurs d'entrée en tant que paramètres d'itinéraire

Question

Je souhaite envoyer la valeur saisie au serveur en tant que paramètre de routage. Dois-je écrire une fonction pour coder ces valeurs ? J'essaie d'accomplir cela sans aucune bibliothèque.

Par coïncidence, j'ai entré localhost 8000 par erreur, puis le navigateur a ajouté l'URL de localhost 3000 à 8000 avant de pouvoir utiliser les paramètres de recherche définis, et j'ai ajouté ces valeurs aux paramètres de route, mais l'URL du serveur ne l'a évidemment pas fait. Ce n’est pas correct.

Voici mon 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;

Lors de la soumission, je ne reçois que l'objet vide URLSearchParams{}

Answer 1

Fonction setSearchParams 的工作方式类似于函数 navigate，它会执行导航操作，但只会更新当前 URL 的搜索字符串。代码实际上并没有更新 searchParamsVariable.

Vous souhaitez récupérer l'objet input 状态并创建一个新的 URLSearchParams.

Exemple :

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