React - 从全局上下文中过滤获取的数据的问题

Posted 2023-04-14

【中文标题】React - 从全局上下文中过滤获取的数据的问题

【英文标题】：React - problems with filtering fetched data from global context

【发布时间】：2020-11-01 08:25:24

【问题描述】：

我有一个简单的应用程序，显示带有价格的商品。我创建了一个全局上下文作为我的全局状态。我正在尝试制作一个过滤器组件，我可以在其中过滤从上下文中获得的商品 - 按价格过滤商品（按最高或最低排序）。

这是我的过滤器组件：

import * as React from "react";

const Filter = ( updateFilter ) => 
  const [state, setState] = React.useState("");

  const handleChange = (prop, value) => 
    setState(
      [prop]: value,
    );
  ;

  return (
    <div>
        <form onChange=() => updateFilter(state) noValidate>
          <select
            value=state.sortOrder
            onChange=(event) =>
              handleChange("sortItems", event.target.value)
            
          >
            <option value="">Choose...</option>
            <option value="highest">Highest</option>
            <option value="lowest">Lowest</option>
          </select>
        </form>
    </div>
  );
;

export default Filter;

这是使用上述过滤器组件的 home 组件：

import React,  useContext, useState  from "react";
import Filter from "./shared/Filter";
import Card from "./Card";
import  GlobalContext  from "../context/GlobalState";

const defaultState = 
  sortItems: "",
;

const Home = () => 
  const  items  = useContext(GlobalContext);
  const [filter, setFilter] = useState(defaultState);

  const applyFilter = (items, filter) => 
    const  sortItems  = filter;
    let data = items;

    if (sortItems) 
      if (sortItems === "") 
        return data;
      
      if (sortItems === "highest") 
        data = data.sort((a, b) => b.price - a.price);
      
      if (sortItems === "lowest") 
        data = data.sort((a, b) => a.price - b.price);
      
    
    return data;
  ;

  const updateFilter = (filter) => 
    setFilter(filter);
  ;

  const filteredItems = applyFilter(items, filter);

  return (
    <React.Fragment>
      <Filter updateFilter=updateFilter />
      <div>
        filteredItems.map((listing) => (
          <Link
            to=`items/$item.id`
          >
            <Card key=listing.id listing=listing />
          </Link>
        ))
      </div>
    </React.Fragment>
  );  
;

export default Home;

供参考 - 我的全局上下文中的items 正在返回一个项目数组，如下所示：

[
  
    "id": "1",
    "name": "Item A",
    "category": "A",
    "price": 10000 
  ,
  ...
  ..
  ..
]

我现在遇到的问题是，当我第一次选择一个过滤器时，例如 - Highest，我控制台日志 filteredItems，它给了我来自上下文的相同未过滤项目。然后我选择了Lowest，当我安慰登录我的filteredItems时，它给出了我之前选择的Highest，并且我的物品从最高价格排序。

为什么filteredItems 有延迟？我做错了什么？任何帮助将不胜感激！

【问题讨论】：

你指的似乎是排序而不是过滤。您会提供重现您问题的实时 sn-p（例如 codesandbox 或 stackblitz）吗？

另外，请注意.sort() 会改变输入数组（在您的特定情况下为items）。如果您打算将items 复制到data，则需要执行const data = [...items]。

【参考方案1】：

这是一个工作示例： https://codesandbox.io/s/musing-wind-4gcbf?file=/src/GlobalContext.js

一些注意事项：

您的 applyFilter 将 data 变量设置为引用项目，并且由于 sort 发生了变异，您正在通过引用改变状态。相反，我有条件地对退货中的物品副本进行了排序。 虽然不直接使用 index 作为迭代键，但您的项目 ID 是线性的，会影响 react 的跟踪能力。

【讨论】：

非常感谢，并会牢记注意事项！