Redux嵌套状态更新问题：tabData仅接收首个对象的解决方法

问题根源 #

你的changeTab reducer里，硬编码生成了仅含单个对象的tabData数组，完全忽略了dispatch时传入的tabData参数，导致状态更新后tabData只保留首个对象。

修正方案 #

修改TabSlice.ts中的changeTab reducer，直接使用action.payload中的tabData进行赋值，同时确保类型定义一致避免类型错误。

修正后的TabSlice.ts代码

interface ITabContext {
    tabIndex: number,
    posterUrlFetch: string,
    tabData: {
        fetchUrl: string;
        title: string;
    }[]
}

// 让ITab类型与ITabContext结构完全匹配，保证payload类型正确
type ITab = ITabContext;

const initialState = {
    tabIndex: 0,
    posterUrlFetch: 'movie/popular',
    tabData: [
        { fetchUrl: 'movie/popular', title: 'Trending' },
        { fetchUrl: 'movie/upcoming', title: 'Upcoming' },
        { fetchUrl: 'tv/popular', title: 'TV Series' },
    ]
}

const tabSlice = createSlice({
    name: 'tab',
    initialState: initialState as ITabContext,
    reducers: {
        changeTab(state, action: PayloadAction<ITab>) {
            const newItem = action.payload;
            // 直接使用传入的完整tabData数组
            return {
                tabIndex: newItem.tabIndex,
                posterUrlFetch: newItem.posterUrlFetch,
                tabData: newItem.tabData
            }
            // 也可以用Immer简化写法（createSlice默认支持Immer，无需返回新对象）
            // state.tabIndex = newItem.tabIndex;
            // state.posterUrlFetch = newItem.posterUrlFetch;
            // state.tabData = newItem.tabData;
        }
    }
})

export const { changeTab } = tabSlice.actions;
export default tabSlice.reducer;

说明 #

1. 原代码中tabData被手动定义为[{ fetchUrl: newItem.posterUrlFetch, title: newItem.posterUrlFetch }]，这会覆盖你传入的所有tabData数据，仅保留这一个硬编码对象。
2. 修正后直接赋值tabData: newItem.tabData，即可完整接收dispatch时传入的整个tabData数组。
3. 组件中的dispatch代码无需修改，保持原有逻辑即可。

内容的提问来源于stack exchange，提问作者Влад Лисовский