將輸入值作為路由參數傳遞

Question

我想將輸入的值作為路由參數傳送到伺服器。我應該寫一個函數來編碼這些值嗎？我試圖在沒有任何庫的情況下完成這個。

巧合的是，我誤輸入了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 (
    <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;

提交時，我只得到空物件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);
};