Redux项目结合Redux-Thunk调用API后Header组件无法渲染求助

核心问题1：Reducer中字符数组被错误嵌套 #

在characterReducer的FETCH_CHARACTERS_SUCCESS分支里，你把API返回的数组（action.payload）直接追加到原characters数组中，导致characters变成了二维数组，最终map遍历无法正常渲染：

case FETCH_CHARACTERS_SUCCESS:
    return {
        ...state,
        loading: false,
        characters: [...state.characters, action.payload] // 错误：payload本身是数组，此处会形成数组嵌套
    };

API返回的results已经是字符对象组成的一维数组，正确处理方式应为直接替换原数组（若需分页加载则展开合并）：

// 首次加载直接替换
characters: action.payload
// 分页场景下合并数组
characters: [...state.characters, ...action.payload]

核心问题2：Action函数名拼写错误（潜在隐患） #

你的action创建函数actionFetchCharactersSucess存在拼写错误（应为actionFetchCharactersSuccess，缺失字母c），虽然当前type常量匹配暂时不影响功能，但后续维护极易引发问题，建议修正：

// 修正函数名拼写
export const actionFetchCharactersSuccess = (characters) => ({
    type: FETCH_CHARACTERS_SUCCESS,
    payload: characters,
});
// 同步修正fetchCharacters中的调用
dispatch(actionFetchCharactersSuccess(results));

修复后验证 #

修正上述问题后，characters会成为正常的一维数组，Header组件中的characters.map即可正常遍历并渲染每个字符的名称与状态。

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