ReactJS v18 实现无限滚动加载和搜索功能：示例与步骤

本指南将详细介绍如何在 ReactJS v18 页面中实现无限滚动加载和搜索功能。用户可以点击'加载更多'获取更多内容，并通过搜索框筛选结果。我们将提供一个代码示例，展示如何使用状态管理、API调用和JSX渲染来实现这个功能。

功能概述

页面中竖向罗列了多个 item，以及一个搜索框和加载更多的按钮。
点击'加载更多'时，访问 API 加载获得更多 items，并追加到已经罗列的 items 后面。
点击搜索时，访问 API 获取搜索结果放入 items 中展示。
点击'加载更多'时，保留这个搜索条件，加载更多内容。

实现步骤

创建 React 组件

创建一个 React 组件，在该组件的状态中保存当前的搜索条件和已加载的 items 列表。初始化时，将搜索条件设置为空，items 列表设置为初始加载的项。

import React, { useState } from 'react';

const MyComponent = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [items, setItems] = useState(initialItems);

  // 初始加载的项
  const initialItems = [...];

  // 点击加载更多的函数
  const handleLoadMore = () => {
    // 访问 API 加载更多项，并追加到已加载的项后面
    // 更新 items 列表
    setItems([...items, ...newItems]);
  };

  // 点击搜索的函数
  const handleSearch = () => {
    // 访问 API 获取搜索结果
    // 更新 items 列表和搜索条件
    setSearchTerm(searchInputValue);
    setItems(searchResults);
  };

  return (
    <div>
      <input type='text' value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} />
      <button onClick={handleSearch}>搜索</button>

      {/* 展示已加载的 items */}
      {items.map((item) => (
        {/* 渲染 item */}
      ))}

      <button onClick={handleLoadMore}>加载更多</button>
    </div>
  );
};

export default MyComponent;

加载更多

在点击'加载更多'时，调用访问 API 加载更多项的函数，并将新的项追加到已加载的项后面。使用 setItems 更新 items 列表。
搜索

在点击搜索时，调用访问 API 获取搜索结果的函数，并将结果更新到 items 列表中。同时，使用 setSearchTerm 更新搜索条件。
JSX 渲染

在组件的 JSX 中，使用输入框和按钮来获取用户的搜索条件和触发搜索操作。使用 map 方法遍历 items 列表，并渲染每个 item。

代码示例

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [items, setItems] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      try {
        const response = await fetch('/api/items?searchTerm=' + searchTerm);
        const data = await response.json();
        setItems(data);
        setHasMore(data.length > 0);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
      setIsLoading(false);
    };
    fetchData();
  }, [searchTerm]);

  const handleLoadMore = async () => {
    if (isLoading || !hasMore) return;
    setIsLoading(true);
    try {
      const response = await fetch('/api/items?searchTerm=' + searchTerm + '&offset=' + items.length);
      const newItems = await response.json();
      setItems([...items, ...newItems]);
      setHasMore(newItems.length > 0);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
    setIsLoading(false);
  };

  const handleSearch = (e) => {
    setSearchTerm(e.target.value);
  };

  return (
    <div>
      <input type='text' value={searchTerm} onChange={handleSearch} />
      <button onClick={() => setSearchTerm('')}>清空搜索</button>

      {items.map((item, index) => (
        <div key={index}>{item.title}</div>
      ))}

      {isLoading && <div>正在加载...</div>}
      {!isLoading && hasMore && <button onClick={handleLoadMore}>加载更多</button>}
    </div>
  );
};

// 假设我们有一个API端点 `/api/items` 来获取数据
// 这个端点接受两个参数：searchTerm 和 offset
// searchTerm 用于搜索，offset 用于分页
// 例如：`/api/items?searchTerm=test&offset=10` 将返回从第10项开始的搜索结果

export default MyComponent;

注意

上述代码只是一个示例，您需要根据实际需求修改 API 地址、数据结构和 JSX 渲染逻辑。
在实际项目中，建议使用更完善的 API 规范和数据分页机制来提高性能和可扩展性。
可以使用 useEffect 钩子来监听状态变化，并在状态改变时更新数据。
可以使用第三方库，例如 react-infinite-scroll-component，来简化无限滚动加载的实现。
请根据您的项目需求选择合适的 API 调用方法和数据处理逻辑。

通过以上步骤，您就可以在 ReactJS v18 页面中实现无限滚动加载和搜索功能。用户可以轻松地浏览更多内容，并通过搜索框快速找到他们需要的信息。