如何使用接口传递数组对象或将它们存储在 reducer 中以及过滤器如何在其上工作？

如何解决如何使用接口传递数组对象或将它们存储在 reducer 中以及过滤器如何在其上工作？

我在使用 reducer 将对象数组存储在 state 中时遇到了问题。我在下面有这个代码：

这是我的界面：

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

interface FontFamily {
     family: string;
}

这是它加载的地方，reducer 只是存储状态。

const {state,dispatch} = fontReducer();
const font: fontData[] = []
for (let font in data.items) {
    font.push({ family: font.family,})
}
dispatch({type: 'fontStyle',action: font})

然后有一次我尝试用搜索做一个无序列表

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

过滤器将无法识别 fontData 并出现未定义的错误 => "TypeError: Cannot read property 'filter' of undefined"

这里是减速器 -

const fontReducerHandler = () => { 
    switch (action.type) { 
        case "fontStyle": 
            return { ...state,fontData: action.fontData }
    }
}

const initialState: fontStyle { 
    fontSize: 0,fontData: [],}

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

解决方法

问题

您似乎错误地访问了操作负载。你发货

const font: fontData[] = [];
for (let font in data.items) {
  font.push({ family: font.family,});
}
dispatch({ type: 'fontStyle',action: font })

其中 action 是 fontData 数组，但在减速器中您访问的是未定义的 action.fontData。

const fontReducerHandler = () => { 
  switch (action.type) { 
    case "fontStyle": 
        return { ...state,fontData: action.fontData } // action.fontData undefined!!
  }
}

解决方案

正确访问动作负载。

const fontReducerHandler = () => { 
  switch (action.type) { 
    case "fontStyle": 
        return { ...state,fontData: action.action }
  }
}

或者，您可以正确地形成 action 对象以匹配它在 reducer 函数中的访问方式。

const font: fontData[] = [];
for (let font in data.items) {
  font.push({ family: font.family,fontData: font });

现在定义了 action.fontData。