如何在 react-express 节点应用程序中将对象从服务器发送到客户端组件答案

【问题标题】：How to send objects from server to client side components in react-express node app如何在 react-express 节点应用程序中将对象从服务器发送到客户端组件
【发布时间】：2018-11-16 12:29:23
【问题描述】：

如何将 JS 对象从 Express 后端发送到客户端 React 组件？

我可以通过将它们设置为res.locals 或cookies 来发送简单的变量，但是对于较大的对象，我该怎么做呢？

不支持 API，因为它会导致页面加载，然后请求使用户在屏幕上等待。我的详细信息在服务器启动后立即可用。

代码流程简介：

它是一个kraken 应用程序，如果我这样做，在服务器端，

router.get('/', (req, res) => res.render('index')),

ejs在express config中设置为视图引擎，它会将索引文件返回给浏览器，并添加webpack捆绑的react代码。

【问题讨论】：

你能举一个你的反应代码和你的快递代码的例子吗？
JSON.stringify(obj)?
嗨，我没有 github 链接作为它的内部项目，但我可以告诉它是怎么回事。它是一个海妖应用程序，在服务器端，如果我这样做了，router.get('/', (req, res) => res.render('index'))，ejs 在 express 配置中设置为 view engine，它会将索引文件返回到浏览器，并将 webpack 捆绑的反应代码添加到它。

标签： javascript node.js reactjs express

【解决方案1】：

通常建议公开一个 API，以便 React 接口可以更新数据，例如当用户浏览页面时，无需重新加载整个页面。 React 在构建时特别考虑了 SPA，并且 React 的很大一部分致力于管理页面结构的增量更新。

但是，如果您想在加载时向您的反应页面提供一些数据，您可以使用脚本标签和 JSON 传递它，如下所示：

在您的模板中：

<script>
  window._myInitialState = JSON.parse("{initialState|js|j|s}");
<script>

（这是使用js（JSON.stringify）、j（JavaScript 字符串）和s（不要转义 HTML）builtin dust filters）来呈现您的数据。例如。 res.locals.initialState 设置为

    {
      users: [
        { name: "Test" },
        { name: "Toast" },
        { name: "Foo" },
        { name: "Bar" },
      ]
    }

它应该将 JSON 编码为以下脚本：


    <script>
      window._myInitialState = JSON.parse("{\"users\":[{\"name\":\"Test\"},{\"name\":\"Toast\"},{\"name\":\"Foo\"},{\"name\":\"Bar\"}]}");
    <script>

在你的模板中使用这个，你应该能够在你的 React 代码中访问window._myInitialState，例如像这样将它加载到你的根组件中：

  componentDidMount() {
    this.setState(window._myInitialState);
  }

【讨论】：