能够在 ReactJs 中共享 URL 的搜索表单

Question

我正在尝试在 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;

感谢您的帮助！

Answer 1

要使这项工作正常进行，您需要进行一些更改。

首先，删除if (query.length > 0) startSearch();这一行。这个赞放错地方了。它在哪里，它在每个渲染器上执行。这意味着每次该组件呈现时，它都会更新搜索查询。
其次，放置该代码的正确位置是在 useEffect 挂钩内，它只会在第一次渲染时调用该函数。所以将该行替换为：

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

这应该可以解决您面临的问题。如果您需要更多帮助，请告诉我。

能够在 ReactJs 中共享 URL 的搜索表单

Search form with ability to share the URL in ReactJs

parameters

url

history

reactjs

use-state