reactjs - 使用 React 呈现来自 Express 的 flash 消息

Question

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

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

Answer 1

我解决了这个问题。

我的 session 中只有一个名为 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 Action 生成器中处理提交和响应。如果用户通过身份验证，则消息属性将未定义。

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

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

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

return action.payload || false;

<强>5。那么就是将状态渲染到屏幕上的问题了。当组件卸载以重置状态时，可以发送另一个操作。

希望这对其他人有帮助。