React中首次API调用后setState不生效，二次提交提示不显示问题

问题原因 #

核心有3个导致二次提交后提示不生效的点：

• 相同状态值触发React更新跳过：如果两次请求返回结果一致（比如连续两次提交都成功），你调用setActive传入的类名字符串和当前已有active state完全相同，React浅比较后会判定状态无变更，跳过重渲染，视图不会更新。
• CSS动画无法重复执行：fade-out类对应的CSS动画只会在类名首次绑定到DOM元素时触发一次，只要类名没有被移除过，后续就算元素重渲染也不会重新播放动画。
• 行内固定透明度冲突：你给提示p标签写死了行内样式opacity:0，CSS动画执行时优先级高于行内样式所以首次能看到，但动画结束后会回到行内设置的透明状态，后续就算状态更新也看不到提示。

修复方案 #

1. 调整提交逻辑，每次提交前先重置状态 #

在提交函数最开头先清空原有提示和类名，保证下次设置状态时是新值，能触发重渲染：

const handleSubmit = (e) => {
  e.preventDefault();
  // 先重置状态
  setMsg('');
  setActive('alert');
  // 发送请求
  axios.post('/some/endpoint', {mydata})
    .then(res => {
      console.log(res.data);
      // 加短延迟确保重置后的状态已经渲染到DOM，再设置新状态触发动画
      setTimeout(() => {
        if(res.data.success) {
          setMsg('successful');
          setActive('alert alert-success fade-out');      
        } else {
          setMsg('Oops! An error occured!');
          setActive('alert alert-danger');
        }
      }, 30)
  })
}

2. 删除行内固定透明度样式，交给CSS类控制 #

把原来的提示标签代码：

<p className={active} style={{opacity:0}}>{msg}</p>

修改为：

<p className={active}>{msg}</p>

同时调整对应的CSS规则：

/* 基础提示样式，默认可见 */
.alert {
  opacity: 1;
  transition: opacity 0.3s ease;
}
/* 淡出动画，执行结束后保持透明状态 */
.fade-out {
  animation: fadeOut 3s forwards;
}
@keyframes fadeOut {
  0% { opacity: 1; }
  90% { opacity: 1; /* 前2.7s保持可见 */ }
  100% { opacity: 0; }
}

3. 可选优化：关闭模态框时重置状态 #

如果模态框关闭后再次打开需要清空上次的提示，可以在onCloseModal逻辑中加入状态重置代码：

const onCloseModal = () => {
  // 原有关闭逻辑
  setMsg('');
  setActive('alert');
}

内容的提问来源于stack exchange，提问作者Áron Pop Adorján