使用 React 渲染来自 Express 的 Flash 消息

我已经搜索了很多，但一直无法找到一种简单的方法来从 Express 获取 Flash 消息并在 React 中渲染它们。

我需要访问 Express 服务器上的数据，但是存储这些数据并将其传递给 React 的最佳方式是什么？我正在考虑传递一个对象，当 Reactindex.html文件已呈现，但我不确定如何访问此数据，或在发生某些事件（例如用户输入错误的密码）时发送正确的数据。

我解决了这个问题。

我的会话中有一个名为 flash 的变量，默认设置为 false。

在护照流程的正确部分中，我根据错误将其重新定义为字符串。我有一个 React 操作和减速器来获取这些数据，如果它是真的，则将其渲染到屏幕上。当组件卸载或刷新站点时，我将其重置为 false。

编辑：我找到了更好的解决方案

1. 在护照中间件中设置出现问题时的可选消息。

return done(null, false, { message: 'Email not found' });

2. 在login路由发送此信息作为响应。

router.post('/login', (req, res, next) => {

    passport.authenticate('local-login', (e, user, info) => {
        if(e) return next(e);
        if(info) return res.send(info);
        req.logIn(user, e => {
            if(e) return next(e);
            return res.send(user);
        });
    })(req, res, next);
});

3. 在 Redux 操作生成器中处理提交和响应。如果用户进行身份验证，则消息属性将是未定义的。

const res = await axios.post('/auth/login', { email, password });

dispatch({
    type: 'FLASH',
    payload: res.data.message
});

4. 在reducer中，状态要么是字符串，要么是false：

return action.payload || false;

5.接下来就是将状态渲染到屏幕上的问题了。当组件卸载以重置状态时，可以发送另一个操作。

希望这对其他人有帮助。