为什么useReducer里的dispatch不更新状态?

设计师羽铮 阅读 24

在用useReducer处理表单输入时遇到问题,输入框的值没反应。写了个handleChange函数,通过dispatch(‘UPDATE_FIELD’)传递value,但状态一直没变。

试过检查action.type和初始状态结构,控制台也没报错。这是我的代码:


const [state, dispatch] = useReducer((state, action) => {
  switch(action.type) {
    case 'UPDATE_FIELD':
      return { ...state, [action.field]: action.value }; // 这里可能有问题?
    default:
      return state;
  }
}, { name: '' });

function handleChange(e) {
  dispatch({
    type: 'UPDATE_FIELD',
    value: e.target.value // 没有传递field参数
  });
}

输入框绑定了state.name,但打字时值就是没更新,搞不明白哪里漏了

我来解答 赞 8 收藏
二维码
手机扫码查看
1 条解答
UX梓奥
UX梓奥 Lv1
你dispatch的时候根本没传field名,reducer里怎么知道要更新哪个字段。懒人方案:改两行代码就行。

function handleChange(e) {
dispatch({
type: 'UPDATE_FIELD',
field: e.target.name,
value: e.target.value
});
}


记得input加上name属性,比如 name="name",不然还是白搭。
点赞 1
2026-02-12 05:00