将 POST 反应到节点服务器并处理 JSON 响应答案

【问题标题】：React POST to Node Server and handle JSON response将 POST 反应到节点服务器并处理 JSON 响应
【发布时间】：2017-05-09 07:41:56
【问题描述】：

我是 React 的新手，所以我试图了解所有这些是如何协同工作的。

在从节点服务器获得状态 200 后，有没有办法更改正在为另一个组件呈现的组件？

例如。我正在使用快速服务器从注册页面向我的节点发出 POST http 请求。带有 json 对象的服务器响应到我的前端。现在我希望配置文件组件/页面呈现而不是停留在注册页面。这允许我使用 Json 数据并将其呈现在个人资料页面上。这可能吗？如果您有其他选择，我也愿意提供建议。

谢谢大家。

注意：我正在使用反应路由器来控制不同的路由。我的节点服务器设置了护照来处理注册。

【问题讨论】：

标签： javascript node.js reactjs express react-router

【解决方案1】：

您基本上需要管理应用程序的状态（用户已连接/未连接）。然后你可以将你的页面包装在一个组件中，管理用户是否连接。

假设如果登录成功，您将 user_is_logged 设置为 true。您可以执行以下操作：

var PageWrapper = React.createClass({
    render : function() {
        // user_is_logged is true if user is correctly logged
        // LoginPage is the authentication form
        var pageContent = user_is_logged ? this.props.children : <LoginPage />;
        return (
            <div>
                <Menu />
                <div className="container">
                    {pageContent}
                </div>
            </div>
        );
    },
});

var MyPage = React.createClass({
    render : function() {
        return (
            <PageWrapper>
                <div>content of page...</div>
            </PageWrapper>
        );
    },
});

并在 ajax 回调中重新渲染页面：

ReactDOM.render (<MyPage />, document.getElementById('my-app'));

它也适用于 React 路由器。

【讨论】：

【解决方案2】：

请查看 http://redux.js.org/ 上的 Redux 架构

了解它的概念会让你明白这一点。

然后，转到 Redux 高级主题，您将了解异步请求如何与 Redux 组件交互 - (http://redux.js.org/docs/advanced/

希望这会有所帮助。

【讨论】：