这里有一些危险信号，但最突出的是您如何使用watch()。useEffect和useState(可能)将在每次渲染时重新运行，因为watch()可能正在返回非备注对象。您的代码使用useState“工作”的原因是setting a state object to the same thing does nothing--如果用户名或密码没有更改，则状态不会更新，因此组件不会重新呈现。

但useReducer并非如此，除非您在Reducer函数中显式地满足它--下面这样的代码可能会修复这个错误：

const reducer = (state, action) => {
  switch (action.type) {
    case "username":
      return state.username !== action.payload
        ? {...state, username: action.payload }
        : state;

    case "password":
      return state.password !== action.payload
        ? {...state, password: action.payload }
        : state;

    default: 
      return state;
  }
};

但是，您还应该尝试使挂钩的依赖项尽可能简单。有什么原因不能先调用watch()，然后将值传递给您的效果吗？

const { username, password } = watch();

useEffect(() => {
  dispatch({type : 'username', payload : username});
  dispatch({type : 'password', payload : password});
}, [username, password]);

或者，您可以更好地将两者分为两种不同的效果-如果password已更改，则无需发送username更新：

const { username, password } = watch();

useEffect(() => {
  dispatch({type : 'username', payload : username});
}, [username]);

useEffect(() => {
  dispatch({type : 'password', payload : password});
}, [password]);

而且，当我们处于重构模式时，为什么不创建一个定制钩子来为您处理逻辑呢？类似于：

const useLoginFormState = (formValues) => {
  const { username, password } = formValues;

  useEffect(() => {
    dispatch({type : 'username', payload : username});
  }, [username]);

  useEffect(() => {
    dispatch({type : 'password', payload : password});
  }, [password]);

  return formValues;
}

// Now in your component -
const MyComponent = () => {
  const formValues = useLoginFormState(watch());
};