如何使用interface在reducer中存储数组对象并对其执行filter操作？

核心错误点 #

• reducer处理函数未接收state和action两个入参，导致内部无法获取当前状态和传入的操作数据，更新失败后fontData会变为undefined
• dispatch传参与reducer取值逻辑不匹配：dispatch时传入的字体数组放在了action字段中，但reducer内尝试读取action.fontData，字段名对应不上
• for循环逻辑错误：使用for...in遍历数组得到的是索引值，无法直接获取字体对象的family属性，应该使用for...of遍历
• 存在多处语法与类型声明错误：
  1. 存储字体的数组类型声明错误，你定义的字体对象接口是FontFamily，不是fontData
  2. 初始状态initialState定义缺少赋值等于号
  3. JSX中li标签的key属性多写了一个右大括号
  4. reducer未添加default分支，未匹配到type时会返回undefined导致state异常

修正后的代码 #

1. 类型定义部分 #

interface FontStyle {
  fontSize: number;
  fontData: FontFamily[];
}

interface FontFamily {
  family: string;
}

2. reducer逻辑部分 #

const fontReducerHandler = (state: FontStyle, action: { type: string; payload: FontFamily[] }) => { 
  switch (action.type) { 
    case "fontStyle": 
      return { ...state, fontData: action.payload }
    default:
      return state
  }
}

const initialState: FontStyle = { 
  fontSize: 0, 
  fontData: [], 
}

export const fontReducer = () => {
  const [state, dispatch] = useReducer(fontReducerHandler, initialState);
  return { state, dispatch }
}

3. 数据加载与dispatch调用部分 #

const {state, dispatch} = fontReducer();
const fontList: FontFamily[] = []
for (let font of data.items) {
  fontList.push({ family: font.family })
}
dispatch({type: 'fontStyle', payload: fontList})

4. 列表渲染部分 #

<ul>
    {state.fontData.filter((item) => item.family.toLowerCase().includes(search)).map(font => (
         <li key={font.family} onClick={selectFont}> {font.family} </li>
    ))}
</ul>

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