React Hooks 搜索输入按键输入重定向结果页面

Question

我有一个搜索组件。当输入按键输入重定向到结果页面。但我无法获得搜索过滤结果。如何过滤 json？这是代码，谁能帮帮我？

https://codesandbox.io/s/inspiring-swanson-t8fi1

Answer 1

这里是它如何工作的演示 Sandbox。当然，你需要重构代码。

想法是当您按下键时，您需要在 URL 的查询参数中传递搜索词：

history.push(`/SearchResult/?search=${search}`);

在此页面上，您需要从 URL 获取参数并使用 useLocation:

import { useLocation } from "react-router-dom";

并使用 URLSearchParams:

解析结果

const search = new URLSearchParams(location.search).get("query");

请查看提供的示例中的更多详细信息。

Answer 2

首先将其添加到您的路线中。因为你只声明了 SearchResult 路由而不是 SearchResultPage 不管他们使用相同的 comp

{
    path: `/SearchResultPage`,
    component: SearchResult
  }

设置上下文：

export const Context = createContext();

和提供商：

const Provider = ({ children }) => {
  const [gameIds, setGameIds] = useState([]);
  const provider = useMemo(() => ({ gameIds, setGameIds }), [
    gameIds,
    setGameIds
  ]);

  return (
    <Context.Provider value={{ ...provider }}>{children}</Context.Provider>
  );
};

能够全局保存变量。

将 id 保存到搜索组件的数组中：

const { setGameIds } = useContext(Context);

...
setGames(gameData);
setSearch(e.target.value);
setGameIds(gameData.map(({ id }) => id));

在 SearchResult

上检索它们

const { gameIds } = useContext(Context);
...
data.filter(({ id }) => gameIds.includes(id))

Demo

React Hooks 搜索输入按键输入重定向结果页面

React Hooks seacrh input keypress enter redirect result page

javascript

reactjs

autocomplete

react-hooks