Блог

Я пытаюсь использовать react-select для изменения URL-адреса, когда пользователь выбирает несколько вариантов фильтрации номера. Теперь я сталкиваюсь с проблемой, что, когда я использую несколько опций, изменить URL-адрес для извлечения, например, невозможно: https://jsonplaceholder.typicode.com/posts?userId=10amp;userId=8

Когда я выбираю один фильтр, он также работает (идентификатор пользователя:1-9). Однако это не работает с (идентификатор пользователя:10 , значение=»10″)

Я знаю причину, по которой, если я выберу одиночный фильтр, значение будет возвращено как «строка», поэтому, когда я выберу идентификатор пользователя:10, он будет отображаться как идентификатор пользователя:1 (поскольку термин[0]=1, а не 10). Если я выберу двойные категории, он вернет «Массив».

Итак, как сделать один фильтр «Массивом», а не «строкой» в react-select?

*У меня есть 2 идеи для решения проблем(я не знаю, как их исправить):

1. Реагировать-выберите Фиксированные параметры по умолчанию, чтобы преобразовать строку в массив
2. Используйте qs npm для упорядочения URL-адреса. Однако я не знаю, как разделить регулярное выражение следующим образом: 0=10amp;1=7amp;2=3 (Мне нужно 10,7,3)

 //My filter page
import qs from "qs";
import { useRouter } from "next/router";
import Link from "next/link";
import styles from "../../styles/Home.module.css";

export default function filterPage({ events, term }) {
  const router = useRouter();
  console.log(term);
 
  return (
    <div title="Search Results">
      <Link href="/">Go Back</Link>
      <h1>Search Results for {router.query.term}</h1>

      {events.length === 0 amp;amp; <h3>No events to show</h3>}
    
      {events.map((evt) => (
        <div className={styles.card}>
          userId: {evt.userId}
          <br />
          {evt.title}
        </div>
      ))}
    </div>
  );
}

// fetch data with qs.npm
export async function getServerSideProps({ query: { term } }) {
  console.log(typeof term);
  console.log(term);

 

  const res = await fetch(
    `https://jsonplaceholder.typicode.com/posts?userId=${term[0]}amp;userId=${term[1]}amp;userId=${term[2]}amp;userId=${term[3]}`
  );

  const events = await res.json();

  return {
    
    props: { events, term },
  };
}
 

 //My Filter component
import Select from "react-select";
import { useState } from "react";
import { useRouter } from "next/router";

const options = [
  { value: "1", label: "UserId:1" },
  { value: "2", label: "UserId:2" },
  { value: "3", label: "UserId:3" },
  { value: "4", label: "UserId:4" },
  { value: "5", label: "UserId:5" },
  { value: "6", label: "UserId:6" },
  { value: "7", label: "UserId:7" },
  { value: "8", label: "UserId:8" },
  { value: "9", label: "UserId:9" },
  { value: "10", label: "UserId:10" },
];



export default function Filter(props) {
  const router = useRouter();
  const [value, setValue] = useState(null);
  const onDropdownChange = (value) => {
    setValue(value);
  };

  const submitSelectCategory = (e) => {
    e.preventDefault();

    const multiCategories = value.map((item) => {
      return item.value;
    });

    const joinURL = multiCategories.join("amp;term=");
    // const categoriesURL = `/card/${joinURL}`;
    const categoriesURL = `/card/search?term=${joinURL}`;
    router.push(categoriesURL);
  };

  return (
    <div style={{ width: "300px", margin: "30px auto" }}>
      <form onSubmit={submitSelectCategory}>
        <Select
          value={value}
          options={options}
          onChange={onDropdownChange}
          isMulti
          id="long-value-select"
          instanceId="long-value-select"
        />

        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}
 

Наконец, я использовал оператор es6 if для переключения ситуации между «Строкой» и «Массивом».

 export async function getServerSideProps({ query: { term } }) {
 
// if term = object(array), show term[0]url otherwise, show term
  let arrC =
    term instanceof Object
      ? `https://jsonplaceholder.typicode.com/posts?userId=${term[0]}amp;userId=${term[1]}amp;userId=${term[2]}amp;userId=${term[3]}amp;userId=${term[4]}amp;userId=${term[5]}amp;userId=${term[6]}amp;userId=${term[7]}amp;userId=${term[8]}amp;userId=${term[9]}`
      : `https://jsonplaceholder.typicode.com/posts?userId=${term}`;


  const res = await fetch(arrC);

  const events = await res.json();
  return {
    props: { events, term },
  };
}