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

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;

这是使用上面过滤器组件的主页组件：

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

一些注意事项：

1. 您的applyFilter将数据变量设置为引用项，并且由于排序发生了变化，因此您正在通过引用改变状态。相反，我有条件地对返回中的项的副本进行排序
2. 虽然没有直接使用索引作为迭代关键字，但项目ID是线性的，会影响react的跟踪能力