React：使用useReducer()钩子在表单提交后清空输入框值

你的代码里有三个关键问题导致清空输入框无效，逐个修正就能解决：

• 输入框绑定的state字段错误：JSX里input的value绑定成了nameState.nameValue，但你的reducer状态里存用户名的字段是userName，这会导致输入框无法正确同步state的值，清空操作自然也看不到效果。
• USER_ON_CHANGE的reducer逻辑未更新输入值：当前这个action只是返回原state的userName，完全没处理输入的新值，输入时state根本不会变化，输入框内容也不会更新，后续的清空操作当然也不生效。
• CLEAR action未重置完整状态：清空时只设置了userName: ''，但没重置isValid字段，会导致错误提示可能残留，同时不符合state的初始结构。

修正后的完整代码如下：

const [nameState, dispatchNameState] = useReducer(
  (state, action) => {
    if (action.type === "USERNAME") {
      return {
        userName: action.nameValue,
        isValid: action.nameValue.includes(" "),
      };
    }
    if (action.type === 'USER_ON_CHANGE') {
      // 保留原有状态字段，仅更新输入的用户名
      return {
        ...state,
        userName: action.nameValue,
      };
    }
    if (action.type === 'CLEAR') {
      // 重置为初始状态，包含所有字段
      return {
        userName: "",
        isValid: null,
      };
    }
    // 兜底返回原state，避免未匹配action类型时出错
    return state;
  },
  {
    userName: "",
    isValid: null,
  }
);

// 表单提交处理函数
const addUserHandler = (e) => {
  e.preventDefault();

  const userData = {
    userName: nameState.userName,
  };

  addedUser(userData);

  dispatchNameState({ type: 'CLEAR' });      
};

// JSX部分
<div className="form__group">
  <input
    type="text"
    placeholder="Full Name"
    value={nameState.userName} {/* 修正绑定的状态字段 */}
    onChange={(e) =>
      dispatchNameState({
        type: "USER_ON_CHANGE",
        nameValue: e.target.value,
      })
    }
    onBlur={(e) =>
      dispatchNameState({
        type: "USERNAME",
        nameValue: e.target.value,
      })
    }
  />
  {nameState.isValid === false && (
    <span className="invalid">*Enter your full name</span>
  )}
</div>

补充说明：

• 使用...state扩展运算符保留原有状态的其他字段，避免每次更新都手动编写所有字段，提升代码可维护性。
• CLEAR操作直接返回初始状态对象，确保所有状态字段都被正确重置。
• 增加兜底的原state返回逻辑，防止遇到未定义的action类型时出现状态异常。

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