如何在每次调用服务端action时重新触发Toast通知？

解决方法1：通过pending状态触发Toast #

如果你的useActionState返回了pending状态（用来标识动作是否在执行），可以监听pending状态的变化来处理：

const [error, loginUser, pending] = useActionState(login, null);

useEffect(() => {
  // 当提交完成（pending从true变false）且存在错误时，显示Toast
  if (!pending && error) {
    toast.error(error);
  }
}, [pending, error]);

每次提交表单时，pending会先变成true，动作结束后变回false。哪怕错误内容和上次一样，pending的变化也会让useEffect重新执行，保证每次错误都能弹出提示。

解决方法2：加个提交计数器 #

要是没有pending状态，就手动加个提交计数的状态变量，每次提交表单时递增它：

const [error, loginUser] = useActionState(login, null);
const [submitCount, setSubmitCount] = useState(0);

return (
  <form 
    action={loginUser} 
    onSubmit={() => setSubmitCount(prev => prev + 1)}
  >
    {/* 你的表单元素 */}
  </form>
);

useEffect(() => {
  if (error) {
    toast.error(error);
  }
}, [error, submitCount]);

每次提交submitCount都会变，就算错误内容没改，useEffect也会因为依赖项更新而跑一遍，自然就能弹出Toast了。

解决方法3：给错误加个唯一标识 #

如果能改服务器动作的返回值，把错误包装成带唯一标识的对象（比如时间戳），这样React会把每次错误都当成新状态：

服务器动作代码：

async function login(formData) {
  // 验证逻辑
  if (密码不符合要求) {
    return { 
      message: "密码过短", 
      id: Date.now() // 加个唯一ID
    };
  }
  // 其他处理逻辑
}

客户端代码：

const [error, loginUser] = useActionState(login, null);

useEffect(() => {
  if (error) {
    toast.error(error.message);
  }
}, [error]);

每次返回的错误对象因为id不同，React会认为状态变了，useEffect就会触发，相同错误也能正常弹出提示。

内容的提问来源于stack exchange，提问作者Random Data Monster