React Redux状态更新延迟，显示上一次更新内容的问题求助

问题描述 #

我有两个选择输入框，包含3个主分类，选择不同主分类时，子分类输入框的选项会对应变化。但当前出现异常：每次打印subCategories时，仅显示上一次选择的主分类对应的数组。例如选择「Programaçao」时无内容显示，选择「Marketing」时才显示「Programaçao」对应的数组。

现有代码 #

Slice代码 #

const initialState: SubCategoryTyped = {
  value: 'Escolha a categoria redux',
  subCategories: []
}

const ProgrammingOpt = [{option1: 'Front-end', option2: 'Back-end', option3: 'Mobile'}];
const DesignOpt = [{option1:  'UI Design', option2: 'UX Design', option3: 'Web design'}];
const MarketingOpt = [{option1: 'Social media', option2: 'Copywriting', option3: 'ADS'}];


const sliceCategory = createSlice({
  name: "category",
  initialState,
  reducers: {
    addCategory: (state, action: PayloadAction<string>) => {
      state.value = action.payload;
      switch (state.value) {
        case 'Programaçao':
          state.subCategories = ProgrammingOpt;
          state.subCategories;
          break;
        case 'Design':
          state.subCategories = DesignOpt;
          state.subCategories;
          break;
        case 'Marketing':
          state.subCategories = MarketingOpt;
          state.subCategories;
      }
    },
  }
});

export const { addCategory } = sliceCategory.actions;
export default sliceCategory.reducer;

Store配置 #

import sliceCategory from './SliceCategory'

export const store = configureStore({
  reducer: {
    category: sliceCategory,
  }
})

export type RootState = ReturnType<typeof store.getState>
export type addDispatch = typeof store.dispatch;

问题原因分析 #

1. 数据结构冗余：ProgrammingOpt等变量是包含单个对象的数组，而非直接的选项值数组，导致组件渲染时无法直接读取有效选项，且状态更新的触发逻辑易出现延迟。
2. 无效代码干扰：state.subCategories;属于无效语句，对状态更新无任何作用，反而可能造成代码逻辑混淆。
3. 缺少默认分支：switch语句未处理默认情况，当主分类值不匹配时，子分类状态不会重置，可能残留旧数据。

解决方案 #

1. 调整分类选项数据结构 #

将分类选项改为直接的字符串数组，简化状态结构：

const ProgrammingOpt = ['Front-end', 'Back-end', 'Mobile'];
const DesignOpt = ['UI Design', 'UX Design', 'Web design'];
const MarketingOpt = ['Social media', 'Copywriting', 'ADS'];

2. 修正Slice逻辑 #

删除无效语句，添加默认分支：

const sliceCategory = createSlice({
  name: "category",
  initialState,
  reducers: {
    addCategory: (state, action: PayloadAction<string>) => {
      state.value = action.payload;
      switch (state.value) {
        case 'Programaçao':
          state.subCategories = ProgrammingOpt;
          break;
        case 'Design':
          state.subCategories = DesignOpt;
          break;
        case 'Marketing':
          state.subCategories = MarketingOpt;
          break;
        default:
          state.subCategories = [];
      }
    },
  }
});

3. 确保组件正确订阅状态 #

在组件中使用useSelector正确获取状态，确保组件能响应状态变化：

import { useSelector } from 'react-redux';
import { RootState } from './store';

// 在组件内获取子分类
const { subCategories } = useSelector((state: RootState) => state.category);

修正后完整Slice代码 #

const initialState: SubCategoryTyped = {
  value: 'Escolha a categoria redux',
  subCategories: []
}

const ProgrammingOpt = ['Front-end', 'Back-end', 'Mobile'];
const DesignOpt = ['UI Design', 'UX Design', 'Web design'];
const MarketingOpt = ['Social media', 'Copywriting', 'ADS'];

const sliceCategory = createSlice({
  name: "category",
  initialState,
  reducers: {
    addCategory: (state, action: PayloadAction<string>) => {
      state.value = action.payload;
      switch (state.value) {
        case 'Programaçao':
          state.subCategories = ProgrammingOpt;
          break;
        case 'Design':
          state.subCategories = DesignOpt;
          break;
        case 'Marketing':
          state.subCategories = MarketingOpt;
          break;
        default:
          state.subCategories = [];
      }
    },
  }
});

export const { addCategory } = sliceCategory.actions;
export default sliceCategory.reducer;

内容的提问来源于stack exchange，提问作者carlos sodre