Reactjs 排序和筛选反应上下文

我做了一点研究，但我发现旧的例子通常是Redux或一个主要组件，无法理解逻辑

我可以从API获取数据，但我确实需要对这些数据进行搜索、排序、筛选等（即使是在同一时间）。我知道我不应该直接改变状态，所以在这种情况下，我将有两个不同的状态集，如Filteredata、Sortedata等。但是，我要传递给播放器组件的状态是什么？排序功能将如何处理过滤后的数据？我非常困惑

我想把我的状态和状态相关的逻辑放在一个上下文中，但如果这看起来有问题或错误，那么我可以尝试你的方法

上下文

const ContextProvider = ({ children }) => {

  const [data, setData] = useState([]);
  const [filteredData, setFilteredData] = useState([]);
  const [sortedData, setSortedData] = useState([]);

  useEffect(() => {
    fetch('URL HERE')
      .then(data => data.json())
      .then(data=> setData(data));
  }, []);

  const handleSearch = e => {
    let value = e.target.value;
    const filteredData = data.filter(player=>
        player.name.includes(value)
    );
    setFilteredData(filteredData);
  };

  const handleSort = e => {
    let value = e.target.value;
    // I am trying to sort FILTERED DATA?
    const sortedData = filteredData.sort((a, b) => {
      if (a[value] < b[value]) {
        return 1;
      } else {
        return -1;
      }
    });
    setSortedData(sortedData);
  };

  return (
    <Context.Provider
      value={{ data, handleSearch, handleSort, filteredData, sortedData}}
    >
      {children}
    </Context.Provider>
  );
};

const ContextProvider=（{children}）=>{
const[data，setData]=useState（[]）；
常量[Filteredata，setFilteredata]=useState（[]）；
常量[sortedData，setSortedData]=useState（[]）；
useffect（（）=>{
fetch（'URL HERE'）
.then（data=>data.json（））
。然后（data=>setData（data））；
}, []);
常量handleSearch=e=>{
设值=e.target.value；
常量filteredData=data.filter（播放器=>
player.name.includes（值）
);
设置过滤数据（过滤数据）；
};
常量handleSort=e=>{
设值=e.target.value；
//我正在尝试对过滤后的数据进行排序？
const sortedData=filteredData.sort（（a，b）=>{
如果（a[值]

搜索

const Search = () => {

  const { handleSearch, handleSort } = useContext(Context);
  return (
    <div className='row'>
      <Input
        type='search'
        name='search'
        onChange={handleSearch}
      ></Input>
      <Input
        type='select'
        name='select'
        onChange={handleSort}
      >
        <option value='name'>Name</option>
        <option value='team'>Team</option>
      </Input>
    </div>
  );
};

const Search=（）=>{
const{handleSearch，handleSort}=useContext（Context）；
返回(
名称
团队
);
};

玩家

const Player = () => {
  const {data, filteredData, sortedData} = useContext(Context);
  return (
      <ul>
        //{data or filteredData or sortedData will be mapped?}
        <li>// not sure what to do</li>
      </ul>
  );
};

constplayer=（）=>{
const{data，filteredData，sortedData}=useContext（上下文）；
返回(

//{将映射数据或Filteredata或Sortedata？}
//不知道该怎么办

);
};

---

我非常欣赏有一些解释的代码示例。

有很多方法可以做到这一点

我的建议是：-

Set

const[filteredData，setFilteredData]=useState（数据）

（这不起作用）。因此，请在

Player

中使用effect（）更新

filteredata

，然后：-

用户发出的每个请求（输入）都将由

setFilteredata（）更新

• 如果用户对

  输入不做任何操作

  ，则返回包含故障

  数据的
  过滤器数据

• 如果用户执行

  搜索

  输入，则执行

  过滤

  搜索

  过滤数据

  （使用

  设置过滤数据（）

  ）
• 如果用户执行

  排序

  输入，则在

  filteredData

  上执行

  排序

  （使用

  setFilteredData（）

  ）
• 如果用户同时执行

  搜索

  和

  排序

  输入，则对

  过滤数据

  执行这两个操作（使用

  设置过滤数据（）

  ）

在

Player

中，您可以

返回
filteredData

上下文

const ContextProvider=（{children}）=>{
const[data，setData]=useState（[]）；
常量[Filteredata，setFilteredata]=useState（[]）；
const[searchKey，setSearchKey]=useState（“”）；
const[sortKey，setSortKey]=useState（[]）；
useffect（（）=>{
fetch（'URL HERE'）
.then（data=>data.json（））
。然后（data=>setData（data））；
}, []);
常量handleSearch=（）=>{
常量filteredData=filteredData.filter（播放器=>
player.name.includes（搜索键）
);
设置过滤数据（过滤数据）；
};
常量handleSort=（）=>{
const sortedData=filteredData.sort（（a，b）=>{
if（a[sortKey]

搜寻

const Search=（）=>{
常数{
搜索键，设置搜索键，
排序键，设置排序键
}=使用上下文（上下文）；
返回(
setSearchKey（e.target.value）}
>
setSortKey（e.target.value）}
>
名称
团队
);
};

玩家

constplayer=（）=>{
常数{
数据，
过滤数据，设置过滤数据，
搜索键，排序键。
handleSearch，handleSort
}=使用上下文（上下文）；
//设置过滤器数据
useffect（（）=>{
setFIlteredData（数据）
}，[]）//应在已装载的计算机上运行一次
//搜索
//应取决于搜索输入状态（因此您需要一个状态来保存搜索所需的值）
useffect（（）=>{
handleSearch（）
}，[searchKey]）//仅当searchState更改时才会激发/运行
//分类
//应取决于排序输入状态（因此您需要一个状态来保存排序所需的值）
useffect（（）=>{
handleSort（）
}，[sortKey]）//仅在sortingState更改时激发/运行
返回(

{filteredData.map（数据=>(
{/*显示数据信息*/}
))}

);
};

或者您可以引入一个新的状态，默认情况下该状态将包含数据，

const[finalData，setFInalData]=useState（data）

。如果你有

sortedData

或

filteredData

想在之后显示，只需更新

setFinalData（toWhatDataSetYouWant）

更新：我正在等待一个简单的解决方案，根本不使用上下文API。我刚刚做了一个工作。希望有帮助。首先，

filteredData

在安装组件后返回一个空数组。如果我先搜索一些东西，那么我也可以在屏幕上看到玩家，排序逻辑在这种方法中似乎不起作用。我已经更新了上面的答案。顺便说一下，处理搜索和排序应该更准确，如果你处理它的话，这是有意义的

useEffect(() => {
  setFilteredData(data)
}, [])

const ContextProvider = ({ children }) => {

  const [data, setData] = useState([]);
  const [filteredData, setFilteredData] = useState([]);
  const [searchKey, setSearchKey] = useState('');
  const [sortKey, setSortKey] = useState([]);

  useEffect(() => {
    fetch('URL HERE')
      .then(data => data.json())
      .then(data=> setData(data));
  }, []);

  const handleSearch = () => {
    const filteredData = filteredData.filter(player=>
        player.name.includes(searchKey)
    );
    setFilteredData(filteredData);
  };

  const handleSort = () => {
    const sortedData = filteredData.sort((a, b) => {
      if (a[sortKey] < b[sortKey]) {
        return 1;
      } else {
        return -1;
      }
    });
    setFilteredData(sortedData);
  };

  return (
    <Context.Provider
      value={{
        data, filteredData, searchKey, sortKey,
        setFilteredData, setSearchKey, setSortKey,
        handleSearch, 
        handleSort, 
      }}
    >
      {children}
    </Context.Provider>
  );
};

const Search = () => {

  const {
    searchKey, setSearchKey,
    sortKey, setSortKey
  } = useContext(Context);
  
  return (
    <div className='row'>
      <Input
        type='search'
        name='search'
        value={searchKey}
        onChange={e => setSearchKey(e.target.value)}
      ></Input>
      <Input
        type='select'
        name='select'
        value={sortKey}
        onChange={e => setSortKey(e.target.value)}
      >
        <option value='name'>Name</option>
        <option value='team'>Team</option>
      </Input>
    </div>
  );
};

const Player = () => {
  const {
    data,
    filteredData, setFilteredData,
    searchKey, sortKey.
    handleSearch, handleSort
  } = useContext(Context);
 
  // set filteredData
  useEffect(() => {
    setFIlteredData(data)
  }, []) // should run once on mounted

  // do search
  // should be dependent on search input state (so you need a state to hold value need for searching)
  useEffect(() => {
    handleSearch()
  }, [searchKey]) // will only fired/run if searchState changes

  // do sorting
  // should be dependent on sorting input state (so you need a state to hold value need for sorting)
  useEffect(() => {
    handleSort()
  }, [sortKey]) // will only fired/run if sortingState changes

  return (
      <ul>
        {filteredData.map(data => (
          {/* display data info */}
        ))}
      </ul>
  );
};