React TypeScript中useReducer实现报错，寻求技术帮助

你的代码存在多处语法与逻辑错误，导致无法正常运行，下面逐一说明并给出修复方案：

1. State属性名不匹配 #

你定义的Istate接口中计数器字段是counter，但reducer返回的是count，这会导致更新后的state丢失counter属性，组件无法正确读取计数。

2. Switch分支不完整 #

TypeScript要求switch语句必须覆盖所有可能的枚举值，或提供default分支，否则会提示"函数缺少返回值"的编译错误。

3. 组件未定义关键变量/函数 #

• increment触发函数未实现，需要通过dispatch发送对应action
• counter变量未定义，应从state.counter读取

4. Enum与case值不一致 #

你使用了ActionKind枚举规范动作类型，但reducer的case里直接写字符串"INCREASE"，应该用ActionKind.increase，避免拼写错误且符合TypeScript类型约束。

5. Action的payload设计冗余 #

当前increase/decrease动作不需要payload，可以调整Action类型，让payload根据动作类型可选或匹配对应需求。

修复后的完整代码 #

import { useReducer } from 'react';

interface IState {
  counter: number;
  name: string;
}

enum ActionKind {
  Increase = "INCREASE",
  Decrease = "DECREASE",
}

// 针对不同动作定义精准的Action类型
type Action = 
  | { type: ActionKind.Increase }
  | { type: ActionKind.Decrease };

const initialState: IState = {
  counter: 1,
  name: "tt",
};

function reducer(state: IState, action: Action) {
  switch (action.type) {
    case ActionKind.Increase:
      return { ...state, counter: state.counter + 1 }; // 展开原state，避免丢失其他属性
    case ActionKind.Decrease:
      return { ...state, counter: state.counter - 1 };
    default:
      return state;
  }
}

export function Hooktest() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => {
    dispatch({ type: ActionKind.Increase });
  };

  const decrement = () => {
    dispatch({ type: ActionKind.Decrease });
  };

  return (
    <>
      <p>当前计数：{state.counter}</p>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
    </>
  );
}

额外优化说明 #

• 使用对象展开运算符...state，避免手动复制所有属性，减少出错概率
• 拆分Action类型，让不同动作的类型更精准，TypeScript能更好地做类型检查
• 补充了decrease动作的实现，让功能更完整

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