如何通过React渲染来自Express的flash消息？

我之前折腾过Express+React的消息传递，给你分享几个亲测好用的方案，解决你说的flash消息渲染和数据传递问题：

这是最直接的方式，适合页面刷新后需要展示消息的场景（比如用户输错密码后刷新页面）。

Express端代码（假设用EJS模板引擎）：

// 确保已经配置了express-session和connect-flash中间件
app.get('/', (req, res) => {
  // 取出flash里的错误消息，没有就设为空数组
  const errorMessages = req.flash('error') || [];
  // 把数据转成JSON字符串，注入到HTML模板里
  res.render('index', {
    initialData: JSON.stringify({ errors: errorMessages })
  });
});

然后在你的index.html模板里，添加全局变量：

<!-- 放在React脚本之前 -->
<script>
  window.__INITIAL_APP_DATA__ = <%- initialData %>;
</script>

React组件里就能直接读取这个全局变量：

import { useState, useEffect } from 'react';

function App() {
  // 初始化状态，从全局变量拿消息
  const [errors, setErrors] = useState(window.__INITIAL_APP_DATA__?.errors || []);

  // 组件挂载后清空全局变量，避免下次刷新重复读取
  useEffect(() => {
    delete window.__INITIAL_APP_DATA__;
  }, []);

  return (
    <div className="app-container">
      {/* 渲染错误消息 */}
      {errors.length > 0 && (
        <div className="error-alert">
          {errors.map((msg, idx) => (
            <p key={idx}>* {msg}</p>
          ))}
        </div>
      )}
      {/* 其他页面内容 */}
    </div>
  );
}

如果是单页应用（SPA），不想刷新页面拿消息，可以专门写个接口来读取并清空flash消息：

Express端接口：

app.get('/api/get-flash', (req, res) => {
  // 取出所有类型的flash消息，同时清空（flash是一次性的）
  const errors = req.flash('error');
  const successes = req.flash('success');
  res.json({ errors, successes });
});

React端在需要的时候调用这个接口（比如表单提交失败后）：

async function fetchFlashMessages() {
  try {
    const res = await fetch('/api/get-flash');
    const data = await res.json();
    if (data.errors.length) {
      setErrors(data.errors);
    }
  } catch (err) {
    console.error('获取消息失败：', err);
  }
}

// 比如登录表单提交逻辑
async function handleLogin(e) {
  e.preventDefault();
  const loginRes = await fetch('/api/login', {
    method: 'POST',
    body: JSON.stringify({ username, password }),
    headers: { 'Content-Type': 'application/json' }
  });

  if (!loginRes.ok) {
    // 登录失败，去拿flash里的错误消息
    await fetchFlashMessages();
  } else {
    // 登录成功，跳转到首页
    window.location.href = '/dashboard';
  }
}

其实Flash是传统服务器渲染的产物，在SPA里可以跳过Flash，直接把消息放在接口响应里，更符合现代前端的开发模式：

Express登录接口：

app.post('/api/login', async (req, res) => {
  const { username, password } = req.body;
  try {
    const user = await User.findOne({ username });
    // 验证密码
    if (!user || !(await bcrypt.compare(password, user.password))) {
      return res.status(401).json({ error: '用户名或密码错误' });
    }
    // 登录成功，返回用户信息
    res.json({ success: '登录成功', user: { id: user._id, username: user.username } });
  } catch (err) {
    res.status(500).json({ error: '服务器内部错误，请稍后重试' });
  }
});

React端直接处理响应：

async function handleLogin(e) {
  e.preventDefault();
  try {
    const loginRes = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify({ username, password }),
      headers: { 'Content-Type': 'application/json' }
    });
    const data = await loginRes.json();

    if (!loginRes.ok) {
      // 直接把响应里的错误消息设到状态里
      setErrors([data.error]);
    } else {
      // 处理成功逻辑，比如跳转到首页
      navigate('/dashboard');
    }
  } catch (err) {
    setErrors(['网络请求失败，请检查网络连接']);
  }
}

这三个方案里，我个人更推荐方案3，因为SPA里不需要依赖session的flash，直接在接口里返回消息更直观，代码也更简洁。如果是传统多页应用和SPA混合的场景，方案1或2会更合适。

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