Форма поиска с возможностью поделиться URL-адресом в ReactJs

avatar
Dino
8 августа 2021 в 17:11
299
1
0

Я пытаюсь создать простой компонент поиска в ReactJs с возможностью записи параметров поиска в URL-адресе, тогда URL-адрес может быть передан кому-либо, и поиск может быть запущен автоматически, если входной запрос (URL-адрес ) не пуст.

В этом состоянии моего POC проблема заключается в том, что когда я что-то ввожу в поле ввода, это автоматически записывается в URL (я думаю, из-за useState). Я хотел бы написать запрос в URL-адресе только тогда, когда я нажимаю кнопку поиска, но из-за хука я не могу этого сделать.

Вот мой код:

App.js

import React from "react";
import history from "./history";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Search from './Search';


function App() {
  return (
    <Router history={history}>
      <Route path="/" component={Search}/>
    </Router>
  );
}

export default App;

Search.js

import React, { useState } from "react";
import history from "./history";


const Search = (props) => {

  let params = new URLSearchParams(props.location.search);
  let query = params.get("query") != null ? params.get("query"): "";

  const [search, setSearch] = useState(query);
    
  function startSearch() {
    history.push(`/?query=${search}`);

    console.log(`Result : ${search}`);
  }

  // Start search on the page if a query has been set
  if (query.length > 0) startSearch();

  return (
    <div>
        <input value={search} onChange={(e) => setSearch(e.target.value)}/>
        <button onClick={startSearch} >Search</button>
    </div>
  );
}

export default Search;

Спасибо за помощь!

Источник

Ответы (1)

avatar
Bahdcoder
8 августа 2021 в 19:04
0

Есть ряд вещей, которые необходимо изменить, чтобы все заработало.

  1. Во-первых, удалите строку с текстом if (query.length > 0) startSearch();. Этот лайк поставлен не в том месте. Там, где он есть, он выполняется при каждом рендеринге. Это означает, что каждый раз, когда этот компонент отображается, он будет обновлять поисковый запрос.

  2. Во-вторых, правильное место для размещения этого кода — внутри хука useEffect, который будет вызывать функцию только при первом рендеринге. Поэтому замените эту строку на:

useEffect(() => {
    if (query.length > 0) startSearch();
}, [])

Это должно решить проблемы, с которыми вы столкнулись. Дайте мне знать, если вам понадобится дополнительная помощь.