如何使用useContext在React.js中进行过滤后重新获取数据

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

// 创建上下文
export const DataContext = createContext();

// 创建 Provider 组件
export const DataProvider = ({ children }) => {
  const [data, setData] = useState([]);

  // 这里可以添加获取数据的逻辑，例如从API获取数据
  // ...

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

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

const DataList = () => {
  const { data, setData } = useContext(DataContext);

  // 过滤数据的函数
  const filterData = (filterCriteria) => {
    const filteredData = data.filter(item => /* 过滤逻辑 */);
    setData(filteredData);
  };

  return (
    <div>
      {/* 渲染数据列表 */}
      {/* ... */}
      {/* 过滤按钮或其他触发过滤的元素 */}
      {/* ... */}
    </div>
  );
};

import React from 'react';
import { DataProvider } from './DataContext';
import DataList from './DataList';

const App = () => {
  return (
    <DataProvider>
      <DataList />
      {/* 其他组件 */}
    </DataProvider>
  );
};

export default App;

// 错误的做法
const filterData = (filterCriteria) => {
  data.filter(item => /* 过滤逻辑 */); // 这里没有更新 data
};

// 正确的做法
const filterData = (filterCriteria) => {
  const filteredData = data.filter(item => /* 过滤逻辑 */);
  setData(filteredData); // 确保传递新的数组引用
};