Next.js中react-flash-message错误提示不显示、成功提示仅单次展示

异常表现 #

• 接口返回成功时，成功提示单次展示时长为5秒，但仅能展示1次，后续提交成功无提示
• 接口返回错误时，错误提示完全无法显示

根因分析 #

• 错误分支赋值逻辑错误：接口返回错误时，代码写的是setError(error)，传入的是初始值为空字符串的现有error状态，没有把接口返回的错误消息赋值进去，error状态始终为空，自然触发不了错误提示渲染
• 状态未重置导致组件无法重挂载：react-flash-message仅在组件首次挂载时启动计时逻辑，第一次成功提示展示完自动卸载后，success状态没有被清空，后续再次提交成功时，success值和上次一致，React判定不需要重新渲染FlashMessage组件，导致提示无法二次展示
• 语法兼容问题：JSX中写原生class属性不符合React语法要求，会抛出控制台警告，极端场景下可能导致样式不生效
• 缺少边界处理：没有捕获接口请求异常的场景，网络错误时会直接抛出JS异常
• 冗余代码：存在未使用的依赖导入，徒增包体积

修复后完整代码 #

import React, { useState } from "react";
import FlashMessage from 'react-flash-message';

const Subscribe = () => {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');

  const subscribeMe = async (event) => {
    event.preventDefault();
    // 每次提交前清空上一轮的提示状态
    setError('');
    setSuccess('');

    try {
      // 对邮箱参数做转义，避免特殊字符导致请求异常
      const res = await fetch(`https://example.com/admin-panel/Api/subscribe?email=${encodeURIComponent(email)}`);
      const data = await res.json();
      const { status, msg: message } = data;

      if (status === "false") {
        setError(message);
        // 提示时长到期后清空状态，保证下次触发可正常渲染
        setTimeout(() => setError(''), 5000);
      } else {
        setSuccess(message);
        setTimeout(() => setSuccess(''), 5000);
      }
    } catch (err) {
      // 捕获网络/接口异常场景
      setError('订阅请求失败，请稍后重试');
      setTimeout(() => setError(''), 5000);
    }
  };

  const changeEmail = (event) => {
    setEmail(event.target.value);
  }

  return (
    <form onSubmit={subscribeMe}>
      <input type="email" value={email} onChange={changeEmail} required placeholder="请输入邮箱" />
      <button type="submit">订阅新闻通讯</button>

      {success && (
        <FlashMessage duration={5000} key={`success-${success}`}>
          <div className="alert alert-success">
            <strong>{success}</strong>
          </div> 
        </FlashMessage>
      )}          
      {error && (
        <FlashMessage duration={5000} key={`error-${error}`}>
          <div className="alert alert-danger">
            <strong>{error}</strong>
          </div> 
        </FlashMessage>
      )}
    </form>
  )
}

export default Subscribe;

关键修复点 #

• 修正错误状态赋值逻辑：错误分支传入接口返回的消息内容，解决错误提示不显示的问题
• 增加状态重置逻辑：提交前清空旧提示状态、提示到期后自动清空对应状态，配合动态key保证每次触发提示时FlashMessage都能重新挂载，解决成功提示仅展示一次的问题
• 修正JSX语法：将class替换为React要求的className，消除控制台警告
• 补全异常捕获：处理网络错误、接口报错的边界场景，避免页面崩溃
• 对请求参数做转义处理：避免邮箱带特殊字符时接口请求异常
• 清理冗余导入：移除代码中未使用的useEffect、react-dom的render方法导入，减少无效代码

内容的提问来源于stack exchange，提问作者amit