用反应进行多过滤无法正常工作
每当我的两个过滤器中的任何一个都会更改时，我都在尝试过滤一系列汽车。我运行自己的灌输功能，在其中检查所有过滤器（不仅是更改的过滤器），如下所示。知道为什么它不起作用吗？我希望每当我单击过滤器或所有汽车时，如果没有使用过滤器，就会看到汽车满足过滤器。当前，每当我选择燃油类型或座椅容量时，所有汽车都会消失。
我所有的初始化：
const [timeRange, setTimeRange] = useState([]);
const [fuelTypes, setFuelTypes] = useState([]); // all present fuel types in my DB (initialized in first useEffect)
const [seatNumbers, setSeatNumbers] = useState([]); // all present seat capacity numbers in my DB (initialized in first useEffect)
const [selectedTimeRange, setSelectedTimeRange] = useState([]);
const [selectedFuelTypes, setSelectedFuelTypes] = useState([]); // selected fuel types (selected by the user from the antd Select.Option component)
const [selectedSeatNumbers, setSelectedSeatNumbers] = useState([]); // selected seat numbers (selected by the user from the antd Select.Option component)
const { loading } = useSelector((store) => store.alertsReducer);
const [totalCars, setTotalCars] = useState([]);
const dispatch = useDispatch();
回调的组件会更改我的状态（我正在使用antd）
<Select
allowClear
mode="multiple"
placeholder="Fuel"
style={{ width: "10%" }}
onChange={(values) => {
setSelectedFuelTypes(values);
}}
>
{fuelTypes.map((fuelType, index) => {
return (
<Select.Option key={index} value={fuelType}>
{fuelType}
</Select.Option>
);
})}
</Select>
<Select
onChange={(values) => {
setSelectedSeatNumbers(values);
}}
allowClear
mode="multiple"
placeholder="Seats"
style={{ width: "10%" }}
>
{seatNumbers.map((seatNumber, index) => {
return (
<Select.Option key={index} value={seatNumber}>
{seatNumber}
</Select.Option>
);
})}
</Select>
我的所有使用effeffect s：
useEffect(() => {
dispatch(getAllCars());
}, []);
useEffect(() => {
setFuelTypes(
[...new Set(cars.map((car) => car.fuelType.toLowerCase()))].sort()
); // all possible fuel types
setSeatNumbers(
[...new Set(cars.map((car) => car.capacity))].sort((a, b) => a - b)
); // all possible seat numbers
setTotalCars(cars); // all cars
}, [cars]);
useEffect(() => {
refilter();
}, [selectedTimeRange, selectedFuelTypes, selectedSeatNumbers]);
我在启动时的refilter函数
function refilter() {
setTotalCars(
cars.filter(
(car) =>
selectedFuelTypes.includes(car.fuelType) &&
selectedSeatNumbers.includes(car.capacity)
)
);
}
：
选择过滤器（未显示汽车）：
I am trying to filter an array of cars whenever any of my 2 filters changes. I run my own refilter function where I check all filters (not just the changed one), as you can see below. Any idea why it does not work? I am expecting to see cars satisfying the filters whenever I click a filter OR all the cars if no filters are applied. Currently, whenever I select a fuel type or seat capacity, all the cars disappear.
all my initializations:
const [timeRange, setTimeRange] = useState([]);
const [fuelTypes, setFuelTypes] = useState([]); // all present fuel types in my DB (initialized in first useEffect)
const [seatNumbers, setSeatNumbers] = useState([]); // all present seat capacity numbers in my DB (initialized in first useEffect)
const [selectedTimeRange, setSelectedTimeRange] = useState([]);
const [selectedFuelTypes, setSelectedFuelTypes] = useState([]); // selected fuel types (selected by the user from the antd Select.Option component)
const [selectedSeatNumbers, setSelectedSeatNumbers] = useState([]); // selected seat numbers (selected by the user from the antd Select.Option component)
const { loading } = useSelector((store) => store.alertsReducer);
const [totalCars, setTotalCars] = useState([]);
const dispatch = useDispatch();
the components whose callbacks change my states (I am using antd)
<Select
allowClear
mode="multiple"
placeholder="Fuel"
style={{ width: "10%" }}
onChange={(values) => {
setSelectedFuelTypes(values);
}}
>
{fuelTypes.map((fuelType, index) => {
return (
<Select.Option key={index} value={fuelType}>
{fuelType}
</Select.Option>
);
})}
</Select>
<Select
onChange={(values) => {
setSelectedSeatNumbers(values);
}}
allowClear
mode="multiple"
placeholder="Seats"
style={{ width: "10%" }}
>
{seatNumbers.map((seatNumber, index) => {
return (
<Select.Option key={index} value={seatNumber}>
{seatNumber}
</Select.Option>
);
})}
</Select>
all my useEffects:
useEffect(() => {
dispatch(getAllCars());
}, []);
useEffect(() => {
setFuelTypes(
[...new Set(cars.map((car) => car.fuelType.toLowerCase()))].sort()
); // all possible fuel types
setSeatNumbers(
[...new Set(cars.map((car) => car.capacity))].sort((a, b) => a - b)
); // all possible seat numbers
setTotalCars(cars); // all cars
}, [cars]);
useEffect(() => {
refilter();
}, [selectedTimeRange, selectedFuelTypes, selectedSeatNumbers]);
my refilter function
function refilter() {
setTotalCars(
cars.filter(
(car) =>
selectedFuelTypes.includes(car.fuelType) &&
selectedSeatNumbers.includes(car.capacity)
)
);
}
on startup:
on selecting a filter (no car shown):
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我看不到任何地方定义的“汽车”，因此无法测试。我看到了总车辆，但没有汽车。
灌输者没有传递参数，并且正在使用汽车。那是全球吗？
I don't see "cars" defined anywhere and can't test it because of that. I see totalCars but not cars.
refilter has no parameters passed in, and it's using cars. Is that a global?
问题在于过滤逻辑，而不是使用效率或与反应严格相关的其他任何内容。这是完整的工作代码（可以改进，但这是一个工作解决方案）：
The problem was with the filtering logic, not the useEffects or anything else strictly related to React. Here is the full working code (could be improved, but this is a working solution):