Question

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

这是我的过滤器组件：

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为什么会有滞后？我做错了什么？任何帮助将不胜感激！

Answer 1

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

一些注意事项：

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

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

1 个答案: