函数组件中如何向Redux传递状态与action？react-hook-form触发action无响应问题

云上老周

2026-10-1

问题1：未调用绑定dispatch的setLog方法

你通过connect第二个参数传入的setLog是已经自动绑定了dispatch的版本，只有调用这个props传入的方法才会触发store状态更新。你当前的组件没有从props中取这个方法，直接调用了导入的原始action生成函数，只会返回action对象，不会实际dispatch到store，所以没有效果也不会报错。
修复方式：修改组件参数声明，从props取出setLog：

// 原来的写法：function SignUp({ info }) {
// 修改为：
function SignUp({ info, setLog }) {

问题2：Reducer处理逻辑错误

react-hook-form提交的表单data是对象格式{login: '输入的账号', password: '输入的密码'}，你当前在reducer中直接展开对象到数组里，会得到不符合预期的结果。
如果需求是把每次提交的表单作为独立条目存入数组，修改reducer逻辑：

case 'SET_LOG':
  return [...state, action.payload]; // 去掉action.payload前的扩展运算符

如果需求是存储最新的单条登录信息，把state初始值改为对象：

export default(state={},action) => {
switch(action.type){
    case 'SET_LOG':
        return {...state, ...action.payload};
    default:
        return state;
}
}