【发布时间】：2021-12-19 08:59:51
【问题描述】：
我的应用程序有一个小问题！ 这是一个简单的应用程序，可以显示一些餐厅的桌子，并让您根据用餐人数（容量）和首选地点（Inside、Patio、Bar）过滤这些桌子
我对这个过滤器功能有一个特别的问题： 我可以按位置过滤表格，但是当我尝试同时按容量过滤表格时，它将不起作用（它会忘记位置过滤器，而只是按容量过滤它们）。 我将解释我使用的用户流程：
- 我点击 Place select 并选择选项“Patio”
- 此时显示了 2 个表格；一个是 5 人，另一个是 9 人
- 我点击容量过滤器，选择可容纳 9 人的桌子。
- 应用程序会忘记“天井”值，它还会显示一个带有位置“栏”的表格（这是我要修复的部分，我希望应用程序记住“天井”并且只显示一）
const defaultState : any = {
tables: [],
tablesFiltered: [],
bookings: [],
error: null,
loading: false,
}
case FILTER_TABLE:
return {
...state,
tablesFiltered: action.payload,
}
这是我的行动
export const filterTables = (filteredTable: tableI[]) => {
return (dispatch: (arg0: { type: string; payload?: unknown; }) => void) =>
dispatch({type: FILTER_TABLE, payload: filteredTable})
}
最后，过滤器的逻辑所在的组件：
TableFilter.tsx
import { Form } from 'react-bootstrap';
import { useSelector, useDispatch } from 'react-redux';
import { filterTables } from '../../store/actions';
import { tableI } from '../../Interfaces';
const TableFilter: React.FC = () => {
const tables: tableI[] = useSelector((state: any) => state.tables.tables);
const dispatch = useDispatch();
const handleChange = (event: any) => {
const locationFilter: string = event.target.value;
const capacityFilter: any = event.target.value;
// console.log(typeof capacityFilter);
const filteredArr = tables.filter(
(table) => table.location === locationFilter
);
// console.log(filteredArr);
dispatch(filterTables(filteredArr));
};
const changeCapacity = (event: any) => {
// const locationFilter: string = event.target.value;
const capacityFilter: any = event.target.value;
// console.log(typeof capacityFilter);
const filteredArr = tables.filter(
(table) => table.capacity >= Number.parseInt(capacityFilter)
);
// console.log(filteredArr);
dispatch(filterTables(filteredArr));
};
const locations: string[] = tables.map((table) => table.location);
const capacity: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const uniqueLocations = [...new Set(locations)];
return (
<Form>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Select a table</Form.Label>
<Form.Control
onChange={handleChange}
as="select"
aria-label="form-select-location"
>
<option>Select your table's location</option>
{uniqueLocations &&
uniqueLocations.map((location: string, index: number) => (
<option aria-label="location" key={index} value={location}>
{location}
</option>
))}
</Form.Control>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Select the capacity of your table</Form.Label>
<Form.Control
onChange={changeCapacity}
as="select"
aria-label="form-select-capacity"
>
<option>Number of persons sitting </option>
{capacity &&
capacity.map((capacity: number, index: number) => (
<option aria-label="capacity" key={index} value={capacity}>
{capacity}
</option>
))}
</Form.Control>
</Form.Group>
</Form>
);
};
export default TableFilter;
这是我的 GitHub 存储库：
【问题讨论】：
-
您想始终按容量和位置过滤吗？
-
是的！我希望应用程序显示按地点/位置过滤的表格，以及容量！所以如果我选择“9”和“Patio”，另一个只有 5 个座位的 Patio 表应该会消失
标签： javascript reactjs typescript redux