如何保留无限滚动同时实现独立于其的搜索功能？

核心矛盾在于你原来的逻辑是先切片加载部分数据，再在这部分数据里过滤，导致未被加载的元素无法被搜索到。要解决这个问题，只需要把顺序反过来：先对全量数据做搜索过滤，再对过滤后的结果做无限滚动切片。

具体实现步骤 #

• 调整逻辑顺序：将搜索过滤逻辑从PizzaList组件移到Home组件，先基于搜索关键词过滤完整的filteredPizzas数组，得到搜索结果集合。
• 基于过滤结果做切片：无限滚动的切片操作只针对过滤后的结果，这样滚动加载的是搜索结果里的内容，而非原数组的内容。
• 搜索时重置加载状态：每次用户输入搜索关键词后，重置当前加载的数量，避免搜索后仍保留之前的加载进度，导致显示异常。

代码示例 #

Home组件（核心逻辑调整）

import { useState, useEffect } from 'react';
import PizzaList from './PizzaList';

const Home = ({ filteredPizzas }) => {
  const [searchValue, setSearchValue] = useState('');
  const [currentLoadCount, setCurrentLoadCount] = useState(8); // 初始加载8项

  // 先对全量数据做搜索过滤
  const searchResults = filteredPizzas.filter(pizza => 
    pizza.name.toLowerCase().includes(searchValue.toLowerCase())
  );

  // 对过滤后的结果做无限滚动切片
  const displayedPizzas = searchResults.slice(0, currentLoadCount);

  // 滚动监听：加载更多过滤后的结果
  useEffect(() => {
    const handleScroll = () => {
      // 滚动到接近底部时触发加载
      if (window.innerHeight + document.documentElement.scrollTop >= document.documentElement.offsetHeight - 200) {
        // 还有未加载的搜索结果时，增加加载数量
        if (currentLoadCount < searchResults.length) {
          setCurrentLoadCount(prev => prev + 4);
        }
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [currentLoadCount, searchResults.length]);

  // 搜索关键词变化时，重置加载数量
  useEffect(() => {
    setCurrentLoadCount(8);
  }, [searchValue]);

  return (
    <div className="home-container">
      <input
        type="text"
        value={searchValue}
        onChange={(e) => setSearchValue(e.target.value)}
        placeholder="搜索披萨名称..."
        className="search-input"
      />
      <PizzaList pizzas={displayedPizzas} />
      {currentLoadCount >= searchResults.length && (
        <p className="no-more-text">{searchResults.length > 0 ? '已显示全部结果' : '没有匹配的披萨'}</p>
      )}
    </div>
  );
};

export default Home;

PizzaList组件（简化为纯渲染）

const PizzaList = ({ pizzas }) => {
  return (
    <div className="pizza-grid">
      {pizzas.map(pizza => (
        <div key={pizza.id} className="pizza-card">
          <h3>{pizza.name}</h3>
          <p>{pizza.description}</p>
          <span className="price">¥{pizza.price}</span>
        </div>
      ))}
    </div>
  );
};

export default PizzaList;

逻辑说明 #

• 搜索时先遍历完整的filteredPizzas数组，确保所有匹配的元素都能被筛选出来，不受之前滚动加载进度的影响。
• 无限滚动只负责加载过滤后的结果，既保留了懒加载的性能优势，又保证搜索功能的完整性。
• 搜索重置加载数量，让每次搜索都从初始加载数量开始，避免搜索后显示过多或过少的内容。

内容的提问来源于stack exchange，提问作者Flain