使用Hooks上下文的React搜索过滤器

Question

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':
filtered: state.data.filter((result:any) => {
const regex = new RegExp(`${action.payload}`, 'ig')
return (
result.plate.match(regex)
);
})
case "CLEAR_FILTER_X":
return {
...state,
filtered:null
}
default:
return state;
}
};

我使用FETCH_X将数据获取到平面列表。稍后，当输入数据时，我想通过过滤FETCH_X中的数据来使用FILTER_X更新平面列表。

我的过滤器x函数正确吗?

我使用filter x函数过滤数据，并等待返回结果。

Answer 1

如果您仔细查看，您在FILTER_X情况下丢失了return，您将返回到filtered:语句。

更新代码:

case 'FILTER_X':
const filtered = state.data.filter((result:any) => {
const regex = new RegExp(`${action.payload}`, 'ig')
return result.plate.match(regex);
})
return {...state, filtered}; // Add this line