基于React Hooks Context的搜索过滤器：FILTER_X函数正确性验证

问题1：语法错误，未返回完整状态对象 #

FILTER_X分支里没有用return返回新的状态对象，直接写filtered: ...是无效语法，正确做法是展开原state并覆盖filtered字段。

问题2：缺少分支终止逻辑 #

switch语句中FILTER_X分支没有终止逻辑，代码会继续执行到CLEAR_FILTER_X分支，最终filtered被设为null，等于白过滤了。

问题3：正则匹配未做边界判断 #

如果result.plate不存在（比如为null/undefined），调用match会抛出错误，需要先做存在性检查。

修正后的xReducer代码： #

const initialState = {
    data:[],
    filtered: null
};

//@ts-ignore
export const XContext = createContext();

const xReducer = (state:any, action: any) => {
    switch (action.type){
        case 'FETCH_X':
            const { data } = action.payload;
            console.log(action.payload,"HEY");
            return {...state, data};

        case 'FILTER_X':
            // 空关键词直接返回原始状态
            if (!action.payload) {
                return {...state, filtered: null};
            }
            const filteredData = state.data.filter((result:any) => {
                // 先检查plate是否存在，再执行匹配
                if (!result.plate) return false;
                const regex = new RegExp(`${action.payload}`, 'ig');
                return result.plate.match(regex);
            });
            // 返回包含filtered的新状态
            return {...state, filtered: filteredData};

        case "CLEAR_FILTER_X":
            return {
                ...state,
                filtered:null
            }
        default:
            return state;
    }
};

补充说明： #

FlatList的数据源可以这样处理：当filtered不为null时用filtered，否则用原始的data，示例代码：

<FlatList
  data={filtered || data}
  // 其他属性...
/>

内容的提问来源于stack exchange，提问作者user17257235