Lulus nilai input sebagai parameter laluan

Question

Saya ingin menghantar nilai yang dimasukkan ke pelayan sebagai parameter penghalaan. Sekiranya saya menulis fungsi untuk mengekod nilai ini? Saya cuba mencapai ini tanpa sebarang perpustakaan.

Kebetulan, saya tersilap memasukkan localhost 8000, dan kemudian penyemak imbas menambahkan URL untuk localhost 3000 hingga 8000 sebelum saya boleh menggunakan set Params Carian, dan saya menambahkan nilai tersebut pada parameter laluan, tetapi URL pelayan jelas tidak. t betul.

Ini kod saya:

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;

Apabila menyerahkan, saya hanya mendapat objek kosong URLSearchParams{}

Answer 1

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

Anda ingin mendapatkan objek input 状态并创建一个新的 URLSearchParams.

Contoh:

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