时间戳

首页 > 解决方案 > JS / React - 如何从一个对象内一次映射两个对象

javascript - JS / React - 如何从一个对象内一次映射两个对象

问题描述

我正在开发一个 React Gatsby.js项目。对于搜索功能，我使用了一个名为gatsby-plugin-local-search 的插件

为了使这个插件工作，我必须在gatsby-config.js文件中运行 GraphQL 查询。然后在规范器中处理数据。下面是脚本的示例代码。请注意我拿出了normelizer。因为我的问题就在这个范围内，我将在下面详细讨论。

    {
      resolve: "gatsby-plugin-local-search",
      options: {
        name: "pagesNL",
        engine: "flexsearch", // The following engines are supported: flexsearch, lunr
        engineOptions: "speed", // Note: Only the flexsearch engine supports options.
        query: `
          {
            allSanityPage {
              nodes {
                id
                title {
                  _key
                  _type
                  en
                  nl
                }
                _rawBlockRows
                slug {
                  current
                }
              }
            }
            allSanityBlog {
              nodes {
                title {
                  _type
                  en
                  nl
                }
                slug {
                  current
                }
                _id
                _rawBody
              }
            }
          }
        `,
        ref: "id",
        index: ["id", "title", "body"],
        store: ["id", "path", "title"],
        normalizer: ({ data }) => (
            // do something with the data <----------------
        ),
      },

如您所见，我查询allSanityPage和allSanityBlog. 现在的目标是从这个脚本合并数据并同时映射它们。

问题

我怎么能.map()一次呢？

首先是一个工作示例allSanityPage

       normalizer: ({ data }) => (
          data.allSanityPage.nodes.map(node => ({
            id: node.id,
            path: node.slug.current,
            title: localizeData(node.title, "nl"),
            body: localizeData(node._rawBlockRows, "nl"),
          }))
       ),

我正在寻找一种方法来填充它的对象data.allSanityPage.nodes和data.allSanityBlog.nodes

我认为这样的事情会起作用：

{...data.allSanityPage.nodes, ...data.allSanityBlog.nodes}.map()

但这显然行不通

（我不担心，body:因为我会像body: (node._rawBlockRows) ? localizeData(node._rawBlockRows, "nl"): localizeData(node._rawBody, "nl"), `

标签： javascriptreactjsgatsby

解决方案

事实上，你的想法是好的，当你尝试{...data.allSanityPage.nodes, ...data.allSanityBlog.nodes}.map()

错误在于你是.map()一个对象，它的原型中没有该功能。

尝试[...data.allSanityPage.nodes, ...data.allSanityBlog.nodes].map(...

来源： https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

推荐阅读