React中useReducer的onChange值重复打印及类型警告问题求助

一、修复TypeScript类型不匹配警告 #

1. 定义状态类型 #

你代码中未定义SignInCredentialsInit类型，TypeScript无法推断状态结构，先明确状态类型：

type SignInCredentials = {
  email: string;
  password: string;
};

2. 完善Reducer函数 #

当前reducer在action类型不匹配时会返回undefined，这会触发类型错误，同时破坏状态完整性。必须添加默认分支返回当前state，同时限定action的type范围：

const handleCredentials = (state: SignInCredentials, action: { type: 'EMAIL' | 'PASSWORD'; payload: string }) => {
  switch (action.type) {
    case 'EMAIL':
      console.log(action.payload);
      return {
        ...state,
        email: action.payload
      };
    case 'PASSWORD':
      return {
        ...state,
        password: action.payload
      };
    default:
      return state;
  }
};

3. 初始化useReducer #

现在初始化useReducer时，TypeScript可以正确推断类型，无需额外复杂配置：

const [credentials, updateCredential] = useReducer(handleCredentials, {
  email: "",
  password: ""
});

二、解决控制台重复打印与输入逻辑错误 #

1. 修复输入内容重复问题 #

你当前的reducer逻辑是把payload拼接到原有状态值上，但e.target.value已经是输入框的完整内容，拼接会导致内容重复（比如输入"a"后再输入"b"，结果会变成"aab"）。改成直接赋值即可解决，上面的reducer已经做了对应修改。

2. 关于控制台两次打印 #

开发环境下React的Strict Mode会自动重复执行reducer、useEffect等函数，目的是检测潜在的副作用问题，这是正常的调试机制，生产环境不会出现该现象。如果想临时关闭，可检查根组件是否被<React.StrictMode>包裹，移除后开发环境会只打印一次，但不建议长期关闭，Strict Mode有助于提前发现代码问题。

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