0

使用减速器将对象数组存储在状态时遇到问题。我在下面有这个代码：

这是我的界面：

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

interface FontFamily {
     family: string;
}

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

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

1 回答 1

2

问题

似乎您正在错误地访问操作有效负载。你派遣

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

现在action.fontData被定义。

于 2021-05-26T05:44:57.080 回答