Question

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

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

Answer 1

我解决了这个问题。

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

在护照流程的正确部分，我将其重新定义为字符串，具体取决于错误。我有一个React动作和reducer来获取这些数据，如果它真实，请将它渲染到屏幕上。卸载组件或刷新站点时，我将其重置为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动作生成器中处理提交和响应。如果用户进行身份验证，则将不确定message属性。

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

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

<强> 4。在reducer中，状态将是字符串或false：

return action.payload || false;

<强> 5。然后是将状态呈现给屏幕的问题。当组件卸载以重置状态时，可以发送另一个操作。

希望这有助于其他人。

Answer 2

expressjs/flash会将一组flash个对象放到res.locals上。根据文档：https://github.com/expressjs/flash#reslocalsflash

res.locals.flash

以下格式的Flash消息数组：

{
  "type": "info",
  "message": "message"
}

根据我的理解，res.locals上的任何内容都可以在全球范围内使用。换句话说，您应该能够window.flash返回Array flash个const makeFlashElement = ({type, message}) => { return ( <div> <h1>message</h1> <h2>type</h2> </div> ) } for (message in flash) { makeFlashElement(message) // ... }个对象。

因此，您只需像在JavaScript中一样循环遍历数组。这只是我的猜测。

MediaRecorder

通常，您会返回React可以轻松消化的JSON响应。

见Karl Taylor的评论。

使用React从Express渲染Flash消息

2 个答案:

res.locals.flash