React中使用useReducer实现密码显隐及登录加载文本异常求助

1. 密码显隐切换失效 #

问题原因 #

reducer处理TOGGLE_PASSWORD动作时，未对showPassword状态做取反操作，而是设置为固定值，导致仅能触发一次显示/隐藏。

修复方式 #

修改reducer中对应逻辑：

case "TOGGLE_PASSWORD":
  return {
    ...state,
    showPassword: !state.showPassword
  };

2. 登录加载状态文本不显示 #

问题原因 #

• 登录函数未先派发设置加载状态的action；
• reducer缺少处理加载状态的分支，无法更新isLoading值。

修复方式 #

1. 在reducer中添加加载状态处理分支：

case "LOGIN_LOADING":
  return {
    ...state,
    isLoading: true
  };

2. 在handleLogin函数开头触发加载状态：

const handleLogin = () => {
  dispatch({ type: "LOGIN_LOADING" });
  // 原有异步登录逻辑保持不变
};

3. 确保按钮的条件渲染逻辑正确：

<button onClick={handleLogin}>
  {isLoading ? "Logging In" : "Login"}
</button>

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