React中如何基于Context API存储的JSON数据实现搜索过滤？

嘿，我来帮你搞定这个问题！用Context API结合搜索过滤其实没那么复杂，咱们一步步来拆解：

首先得确保你的Context里不仅存着原始的JSON数据，还要有过滤后的数据状态，以及专门处理搜索的方法。这样所有组件都能共享搜索逻辑和结果。比如创建一个DataContext.js文件：

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

export const DataContext = createContext();

export const DataProvider = ({ children }) => {
  // 存储原始JSON数据，确保不被修改
  const [originalData, setOriginalData] = useState([]);
  // 存储过滤后的数据，供组件渲染使用
  const [filteredData, setFilteredData] = useState([]);

  // 模拟加载JSON数据的过程（替换成你实际的数据源，比如本地导入或API请求）
  useEffect(() => {
    const loadData = async () => {
      // 示例：从本地JSON文件加载
      const response = await fetch('/your-data.json');
      const data = await response.json();
      setOriginalData(data);
      setFilteredData(data); // 初始化时显示全部数据
    };
    loadData();
  }, []);

  // 核心搜索过滤方法
  const handleSearch = (searchTerm) => {
    // 如果搜索框为空，恢复显示全部数据
    if (!searchTerm.trim()) {
      setFilteredData(originalData);
      return;
    }
    // 根据关键词过滤，这里假设数据里有`name`字段，可根据你的JSON结构调整
    const results = originalData.filter(item => 
      item.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
    setFilteredData(results);
  };

  return (
    <DataContext.Provider value={{ filteredData, handleSearch }}>
      {children}
    </DataContext.Provider>
  );
};

记得把需要用到数据的组件树用DataProvider包裹，这样所有子组件都能访问Context里的数据和方法。比如在App.js里：

import { DataProvider } from './DataContext';
import SearchBar from './SearchBar';
import DataDisplay from './DataDisplay';

function App() {
  return (
    <DataProvider>
      <SearchBar />
      <DataDisplay />
    </DataProvider>
  );
}

export default App;

在搜索框里，我们只需要监听输入变化，调用Context里的handleSearch方法就行。比如SearchBar.js：

import { useContext } from 'react';
import { DataContext } from './DataContext';

const SearchBar = () => {
  const { handleSearch } = useContext(DataContext);

  return (
    <div className="search-bar">
      <input
        type="text"
        placeholder="输入关键词搜索..."
        onChange={(e) => handleSearch(e.target.value)}
      />
    </div>
  );
};

export default SearchBar;

最后在需要渲染数据的组件里，直接获取filteredData并展示。比如DataDisplay.js：

import { useContext } from 'react';
import { DataContext } from './DataContext';

const DataDisplay = () => {
  const { filteredData } = useContext(DataContext);

  if (filteredData.length === 0) {
    return <p>没有找到匹配的数据</p>;
  }

  return (
    <div className="data-list">
      {filteredData.map(item => (
        <div key={item.id} className="data-item">
          <h3>{item.name}</h3>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
};

export default DataDisplay;

• 适配你的数据结构：上面的示例用了name字段过滤，你可以根据自己的JSON数据换成其他字段，比如title、id或者多个字段组合过滤
• 防抖优化：如果数据量很大，建议给搜索加个防抖（比如用setTimeout延迟300ms执行过滤），避免每次输入都触发频繁的过滤操作
• 保持原始数据纯净：一定要用originalData存储未修改的原始数据，不要直接在上面做过滤，这样清空搜索框时才能快速恢复全部内容

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