-
- 使用 createUrlFilterReader 从 URL 参数读取并还原完整的筛选状态，同时追踪已消费的 key
-
- 步骤1：从 URL 参数读取各字段值
-
-{`const reader = createUrlFilterReader(searchParams);
-const keyword = reader.takeFilterEntry('keyword'); // → ${JSON.stringify(roundTripResult.keyword)}
-const city = reader.takeFilterEntry('city', { multi: true }); // → ${JSON.stringify(roundTripResult.city)}
-const status = reader.takeFilterEntry('status'); // → ${JSON.stringify(roundTripResult.status)}
-reader.getConsumedKeys(); // → ${JSON.stringify(roundTripResult.consumedKeys)}`}
-
- 步骤2：还原为筛选值数组
-
- {JSON.stringify(roundTripResult.restored, null, 2)}
-
-
- 验证：还原后的数据与原始数据一致
-
- 还原成功
-
- keyword: {roundTripResult.keyword?.value} | city: [{roundTripResult.city?.map(c => c.value).join(', ')}] | status: {roundTripResult.status?.value}
-
-
-
-
- {/* ===== createFilterValueMapper ===== */}
-
-
- 实际业务中，先用 createFilterValueMapper 将筛选值映射为接口参数格式，再用 filterToUrlParams 序列化到 URL
-
- 映射后的筛选值（用于接口请求）
-
-{`const mapFilterValue = createFilterValueMapper({
- keyword: 'string', // 确保字符串
- city: 'multi', // 多选 → string[]
- status: 'single', // 单选 → string
-});
-
-mapFilterValue(filterValue, getFilterValue);
-// →`}
-{' ' + JSON.stringify(mappedSample, null, 2)}
-
-
-
- {/* ===== useUrlFilterValue ===== */}
-
-
- 基于 useUrlFilter 封装的简化版 Hook，使用 createUrlFilterReader 解析 filterParams[key] 格式，自动解析 label:value，支持单选和多选
-
-
- 1. 数组形式 — 默认单选
-
-{`const [filter, setFilter] = useUrlFilterValue(['keyword', 'status']);
-
-// URL: ?filterParams[keyword]=前端开发&filterParams[status]=招聘中:active
-// → filter: [
-// { name: 'keyword', value: { label: '前端开发', value: '前端开发' } },
-// { name: 'status', value: { label: '招聘中', value: 'active' } }
-// ]`}
-
-
-
-
- 2. 对象形式 — 多选 + 自定义转换
-
-{`// { multi: true } 表示多选，value 为数组
-// 函数接收解析后的值，返回 filter 项或 null 跳过
-const [filter, setFilter] = useUrlFilterValue({
- keyword: true, // 单选，默认转换
- city: { multi: true }, // 多选
- status: (parsed) => parsed // 自定义：直接用解析值
- ? { name: 'status', value: parsed }
- : null
-});
-
-// URL: ?filterParams[city]=上海:010,北京:020
-// → city 的 value: [{ label: '上海', value: '010' }, { label: '北京', value: '020' }]`}
-
-
-
-
- 对比 useUrlFilter
-
-{`// useUrlFilter（完整控制，需手动解析）
-const [filter, setFilter] = useUrlFilter({
- readUrlParams: (searchParams) => {
- const { takeFilterEntry, getConsumedKeys } = createUrlFilterReader(searchParams);
- const keyword = takeFilterEntry('keyword');
- const city = takeFilterEntry('city', { multi: true });
- return { consumedKeys: getConsumedKeys(), keyword, city };
- },
- buildFilter: ({ keyword, city }) => [
- ...(keyword ? [{ name: 'keyword', value: keyword }] : []),
- ...(city ? [{ name: 'city', value: city }] : []),
- ]
-});
-
-// useUrlFilterValue（等价简化写法）
-const [filter, setFilter] = useUrlFilterValue({
- keyword: true,
- city: { multi: true }
-});`}
-
-
-