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

我在使用缩减器以状态存储对象数组时遇到问题。我有以下代码：

这是我的界面：

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>

问题 似乎您访问操作负载的方式不正确。你派

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

其中，

操作

是fontData数组，但在reducer中，您可以访问未定义的

操作.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,});
}
dispatch({ type: 'fontStyle', fontData: font });

现在定义了
action.fontData
。
问题
似乎您访问操作负载的方式不正确。你派

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

其中，
操作
是fontData数组，但在reducer中，您可以访问未定义的
操作.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,});
}
dispatch({ type: 'fontStyle', fontData: font });

现在定义了
action.fontData
。
const-font中的更正-它应该是FontFamily[]=[]而不是fontData
状态。fontData
必须是
未定义的
然后-您可以向我们展示减速机，以及用于获取
状态.fontData
的选择器吗？有state.fontData。const fontReducerHandler=（）=>{switch（action.type）{case“fontStyle”：返回{…state，fontData:action.fontData}}}}}const初始状态：fontStyle{fontStyle:0，fontData:[]，}导出const fontReducer=（）>{const[状态，调度]=useReducer（fontdreducerHandler，初始状态）；return{state，dispatch}看起来好像没有
操作.fontData
-在reducer中，在
开关之前，尝试执行
控制台.log（action）
实际上，我在那里尝试过action.fontData，如果我错过了类型：type action={type:“fontStyle”fontData:fontfamility[]很抱歉const font中的更正-它应该是FontFamily[]=[]而不是fontData
状态。fontData
必须是
未定义的
，然后-您可以向我们展示减速机和用于获取
状态.fontData
的选择器吗？有state.fontData。const fontReducerHandler=（）=>{switch（action.type）{case“fontStyle”：返回{…state，fontData:action.fontData}}}}}const初始状态：fontStyle{fontStyle:0，fontData:[]，}导出const fontReducer=（）>{const[状态，调度]=useReducer（fontdreducerHandler，初始状态）；return{state，dispatch}看起来好像没有
操作.fontData
-在reducer中，在
开关之前，尝试执行
控制台.log（action）
实际上，我在那里尝试过action.fontData，如果我错过了类型：type action={type:“fontStyle”fontData:fontfamility[]很抱歉