reactjs - 配列オブジェクトを渡す方法、またはインターフェイスを使用してレデューサーに格納する方法と、フィルターがどのように機能するか?

Question

レデューサーを使用してオブジェクト配列を状態に格納するときに問題が発生しました。私はこのコードを以下に持っていました：

これは私のインターフェースです：

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

interface FontFamily {
     family: string;
}

これはロードされた場所であり、リデューサーは状態を保存しているだけです。

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 }
}