Question

由于某种原因，直到提交表单时两次单击“提交”按钮，才设置状态。这是我的状态：

const [state, setState] = useState({
  isSuccess: false,
  isFailed: false,
  alertMsg: '',
  userId: '',
  firstName: '',
  lastName: '',
  email: ''
});

这是我的useEffect：

useEffect(() => {
  setState({
    ...state,
    firstName: user.first_name,
    lastName: user.last_name,
    email: user.email
  })
}, [user.first_name, user.last_name, user.email]);

以下是在输入更改时使用的功能：

const onInputChange = (e) => {
  e.persist();
  setState({...state, [e.target.name as string]: e.target.value});
}

以下是更新数据库时使用的功能：

const onUpdateUser = () => {
  const updateUserInfo = {
    first_name: state.firstName,
    last_name: state.lastName,
    email: state.email
  }

  const res = dispatch(updateUser(updatedUserInfo));

  if(res.ok) {
    setState({
      ...state,
      isSuccess: true,
      alertMsg: 'User information updated successfully!'
    })
  } else {
    setState({
      ...state,
      isFailed: true,
      alertMsg: 'User information update failed!'
    })
  }
}

除非两次单击“提交”按钮，否则不会显示成功/失败警报。奇怪的是，如果我分别拥有isSuccess, isFailed, alertMsg，它会完美地工作。例如：

const [state, setState] = useState({
  userId: '',
  firstName: '',
  lastName: '',
  email: ''
});

const [isSuccess, setIsSuccess] = useState(false);
const [isFailed, setIsFailed] = useState(false);
const [alertMsg, setAlertMsg] = useState('');

执行上述操作效果很好。如果无法将所有内容合而为一，我只想知道为什么。试图保持一切清洁。

我们非常感谢您的协助。谢谢！

反应挂钩未设置状态，直到两次单击提交按钮

0 个答案: