Übergeben Sie Eingabewerte als Routenparameter

Question

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{}

Answer 1

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

您想要获取 input 状态并创建一个新的 URLSearchParams 对象。

示例：

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);
};