时间戳

首页 > 解决方案 > 通过我的数组获取 [object Object] 映射

reactjs - 通过我的数组获取 [object Object] 映射

问题描述

我试图在我的 nextJS 应用程序中从 Wordpress CMS 中吐出数据。这是个。ACF 中继器字段。我通过编辑器很好地获取了数据，但尝试使用 map 将其推送到我刚刚得到 [object object] 的页面。

下面是有问题的代码——我只是误解了 Map 的工作原理吗？

 <div className="steve"
  // eslint-disable-next-line react/no-danger
  dangerouslySetInnerHTML={{
   __html: node.GlobalFAQ.faq.map((data) => (
            <div>
              {data.question}
              {data.answer}
            </div>
          )),
        }}
      />

这是返回给我的东西

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

此代码工作正常，这不是调用转发器，只是 ACF 组中的一个字段。

      <div className={blogStyles.blocksContainer}
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{ __html: node.AboutBlocks.blockThree }}
     />

然后下面是我的查询

    query AllPosts {
  posts(where: {id: 25}) {
    edges {
      node {
        id
        date
        title
        slug
        Header {
          headerImage {
            mediaItemUrl
          }
          headerText
        }
        AboutBlocks {
          blockOne
          blockThree
          blockTwo
        }
        SalesBlock {
          salesBlockOne
          salesBlockThree
          salesBlockTwo
        }
        title
        GlobalFAQ {
          faq {
            question
            answer
          }
        }
      }
    }
  }
}

这是我控制台输出 node.GlobalFAQ.faq 时得到的结果

Array(6)

0：{问题：“我如何为我的订单付款？”，回答：“

我们将包含一个带有...的订单摘要链接，就像您在任何其他电子商务商店中所做的一样。

↵"} 1：{问题：“我怎么知道我会得到我的轮子？”，回答：“

想要在发送 mo 之前进行研究……#8217；很高兴知道它在那里）。

↵"} 2：{问题：“如果我发现价格低于您的报价怎么办？”，回答：“

哇。你一定找到了一个非常好的交易。Se……我们会尝试，偶尔我们不能。）

↵"} 3：{问题：“你卖的是第二轮还是有瑕疵的轮子？”，回答：“

没有。除非特别列为有瑕疵的 w…ew、首次运行和制造保修。

↵"} 4：{问题：“你也卖轮胎吗？”，回答：“

是的。我们可以在…els 上获得折扣价。让我们知道您想要什么。

↵"} 5：{问题：“你怎么能卖比其他地方便宜的轮子？”，回答：“

我们可以出售的主要原因有两个，因此可以将大米传递给我们的客户。

↵"} 长度：6 原型：数组（0）

标签： reactjsnext.jswordpress-rest-apiheadless-cms

解决方案

好吧，我找到了答案，我不敢相信我花了两个多小时与之抗争>.<

它正在设置“dangerouslySetInnerHTML”

下面的代码按预期工作。

        <div>
        {node.GlobalFAQ.faq.map((item) => (
          <div>
            <p>{item.question}</p>
            <p>{item.answer}</p>
          </div>
        ))}
      </div>

推荐阅读