🍎 ⛵️ 💢 Bekerja dengan string kueri di React 😭 👎 👩‍🎓

Hei. Ini adalah artikel tentang paket yang saya lewatkan saat bekerja dengan react.

gambar

Untuk lebih spesifik, tentang paket untuk meningkatkan dan memfasilitasi pekerjaan dengan kueri dari bilah pencarian.

Bagaimana Anda melakukannya sekarang

Mengambil nilai

Bagaimana Anda mendapatkan nilai dari string kueri? Saya pikir sesuatu seperti ini:

const { item } = queryString.parse(props.location.search);

atau jika Anda terbiasa dengan URLSearchParams, Anda dapat melakukannya seperti ini:

const params = new URLSearchParams(props.location.search);
const item = params.get('item');

Opsi mana yang lebih disukai tidak sepenuhnya jelas, karena yang pertama menarik paket npm, tetapi berfungsi di mana-mana, dan yang kedua sudah terpasang di browser, tetapi mungkin ada masalah dengan IE ( mozilla ).

Nilai pengaturan

Kami menyelesaikannya, entah bagaimana, tetapi masih mendapatkan hasil yang persis sama seperti yang kami inginkan. Mari beralih ke pengaturan nilai. Ini semua dilakukan menggunakan history.push, yang mengambil string dengan parameter yang sudah ditambahkan. Contohnya seperti ini:

history.push('/path?item=my-item-data')

Untuk konstruksi yang lebih kompleks, Anda perlu menggunakan querystring:

const query = queryString.stringify({ item: "my-item-data" });
history.push(`/?${query}`);

atau URLSearchParams:

const query = new URLSearchParams();
query.set("item", "my-item-data");
history.push(`/?${query}`);

Efek

Baik. Terlepas dari kenyataan bahwa kami selalu menerima data string (dan kami perlu menguraikannya), ada juga masalah jika kami mengharapkan digit, dan sebuah kata datang (pengguna tidak dilarang untuk mengubah kueri di baris), kami harus memeriksa pagar dan mendorong nilainya dirimu sendiri.

Sebagian besar rasa sakit datang ketika diperlukan bahwa bidang permintaan bergantung pada komponen yang sekarang ditampilkan, sekarang setiap komponen akan bekerja dengan satu keadaan global, dan mengubahnya sesuai kebijaksanaan Anda, dengan mengandalkan nilai yang sudah ada, Anda harus menambahkan tidak hanya nilai Anda sendiri untuk ditambahkan , dan juga yang lainnya untuk di-tweak, seperti ini:

const oldQuery = queryString.parse(location.search);
const query = queryString.stringify({ item: "my-item-data" });
history.push(`/?${{...oldQuery,  ...query}}`);

Tentu saja, kemungkinan besar Anda akan memindahkan ini ke dalam suatu fungsi, dan akan lebih nyaman untuk bekerja dengannya. Tetapi kemudian Anda harus memagari fungsi untuk membaca nilai, memeriksa nilai, entah bagaimana menangani kesalahan yang terkait dengan nilai yang diteruskan dan bahkan mendorongnya lagi, jika tidak, kami mengubah nilainya untuk diri kami sendiri, dan membiarkan stringnya tetap sama.

Anda juga perlu menghapus nilai setelah diri Anda sendiri nanti, tentu saja history.push akan melakukannya untuk Anda, tetapi jauh lebih mudah untuk tidak repot-repot dan membiarkan orang lain melakukannya daripada Anda.

Baik. Apa yang saya sarankan?

Saya pikir saya melakukannya untuk Anda, dan dengan cara yang lebih nyaman. Selanjutnya, kita akan berbicara tentang paket npm

react-location-query , yang mungkin menarik perhatian Anda.

Paket mengimplementasikan hook dan komponen HOC (hanya pembungkus di atas hook) untuk menetapkan aturan tentang bagaimana parameter bekerja di bilah pencarian, di mana kita menetapkan nilai di salah satu komponen, atau kita bisa mendapatkannya di komponen lain (bahkan lebih tinggi di pohon, tetapi Anda tidak boleh melakukan itu) ).

Contoh

Misalnya, ada halaman UsersPage dengan komponen UsersList dan Kontrol. UsersList untuk memuat dan menampilkan daftar pengguna, dan Kontrol untuk mengatur pemfilteran pengguna. Semuanya bisa direpresentasikan seperti ini:

const UsersPage = () => {
  const [type] = useLocationField('type', 'github');

  return ...;
}

const UsersList = () => {
  const [page, setPage] = useLocationField('page', {
    type: 'number',
    initial: 1,
    hideIfInitial: true
  });
  const [limit, setLimit] = useLocationField('limit', {
    type: 'number',
    initial: 20,
    hideIfInitial: true
  });
  const [type] = useLocationField('type');

  return ...;
}

const Controls = () => {
  const [type, setType] = useLocationField('type');
 //     type  setType
  return ...;
}

Seperti yang bisa kita lihat, untuk halaman dan bidang batas, kita menggunakan objek dengan opsi berikut:

type — ( , )
initial — ,
hideIfInitial — : , (.. ), ,

Untuk menyesuaikan bidang dan nilainya, ada bidang lain, misalnya, callback (yang mengembalikan nilai baru) jika penguraian nilai tidak mungkin dilakukan (string telah diteruskan, tetapi nilai bilangan / boolean diharapkan). Semua bidang ini dapat dilihat di README di halaman paket npm atau di github. Juga

deskripsi kecil dari kait yang ada:

useLocationField - hook untuk bekerja dengan hanya satu nilai
useLocationQuery - hook multi - nilai
useLocationQueryExtend - pengait untuk bekerja dengan banyak nilai yang datanya berada di luar kerangka standar (misalnya json )
useLocationClear - pengait untuk memulai, Anda harus meletakkannya di komponen root (tanpanya, bidang tidak akan dihapus), atau Anda tidak perlu meletakkannya jika sudah ada beberapa pengait yang dijelaskan di atas

Selain itu, selain kait, ada komponen HOC yang menjadi pembungkusnya untuk kait.

Footer

Artikel ini ditulis untuk memberi tahu orang lain tentang keberadaan paket ini. Masih banyak lagi trik yang ingin saya terapkan di sana (misalnya, enum value), sambil menunggu umpan balik dan informasi apakah paket ini setidaknya memiliki sedikit hak untuk hidup atau sama sekali tidak diperlukan.

Bekerja dengan string kueri di React