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

【问题标题】：React - problems with filtering fetched data from global contextReact - 从全局上下文中过滤获取的数据的问题
【发布时间】：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]。

标签： reactjs react-hooks react-context

【解决方案1】：

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

一些注意事项：

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

【讨论】：

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