在 React 中使用搜索过滤器时如何防止再次获取图像答案

【问题标题】：How to prevent images from fetching again when using search filter in React在 React 中使用搜索过滤器时如何防止再次获取图像
【发布时间】：2022-12-15 09:27:28
【问题描述】：

我有一个 React 应用程序，它基本上显示模因提要（仅图像文件），并且每个模因都有一些可用于搜索该特定模因的标签。我有一个 SearchBar 组件：

const SearchBar = ({ memes, setSearchResults }) => {
  const handleSubmit = (e) => e.preventDefault()

  const handleSearchChange = (e) => {
    if (!e.target.value) return setSearchResults(memes)
    const searchArray = e.target.value.trim().replace(/-/g, '').split(' ')
    const resultsArray = searchAlg(memes, searchArray) 
    setSearchResults(resultsArray)
  }

  return (
    <div>
      <form className="search" onSubmit={handleSubmit}>
        <input
          className="search-input"
          type="text"
          id="search"
          onChange={handleSearchChange}
        />
        <button className="search-button">Hae</button>
      </form>
    </div>
  )
}

...和 Memefeed 组件

const MemeFeed = ({ memes }) => {
  return (
    <div>
      {memes.map((meme) => (
        <Meme key={meme.id} meme={meme} />
      ))}
    </div>
  )
}

...和模因组件

const Meme = ({ meme }) => {
  return (
    <div className="memePost">
      <LazyLoadImage src={meme.url} alt={meme.url} />
      <a
        href={meme.url}
        download={meme.url}
        target="_blank"
        rel="noopener noreferrer"
      >
        Download
      </a>
    </div>
  )
}

主要组件基本上只是为 MemeFeed 组件提供 searchResults 数组，因此只有那些与搜索标签匹配的模因才会显示在页面上。

因此，如果我只是滚动 memefeed（大约有 100 个 meme）并查看网络选项卡，它会显示图像（meme）仅下载一次，如果我向上滚动，则不会重新获取这些图像。

但是，当我使用搜索栏/过滤器时，它会重新获取那些相同的图像，即使它们已经被加载。当我输入过滤器时，提取实际上并没有发生，但只有当我从过滤器退格时才会发生。

我查看了 useMemo 的文档，但看不出这对我有何帮助。

【问题讨论】：

标签： javascript reactjs optimization caching search

【解决方案1】：

为了防止在 React 中使用搜索过滤器时再次获取图像，您可以使用 React.useMemo 钩子来记忆搜索过滤器的结果。这将确保搜索过滤器仅在输入值更改时运行，并且结果被缓存并重新用于后续渲染。首先，您需要从 React 库中导入 useMemo 钩子。然后，您可以使用 useMemo 挂钩将搜索过滤器函数包装在记忆回调中。例如，如果您有一个名为 searchFilter 的搜索过滤器函数，它接受一个项目数组和一个搜索词，您可以使用 useMemo 挂钩，如下所示：

const searchResults = React.useMemo(() => searchFilter(items, searchTerm), [items, searchTerm]);

这将确保 searchFilter 函数仅在 items 数组或 searchTerm 值更改时被调用，并且结果被缓存并重新用于后续呈现。这有助于防止在使用搜索过滤器时不必要地重新获取图像。

【讨论】：