如何从JSON文件中的数组中提取数据(使用Strapi API和Next JS 13)?

u3r8eeie  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(160)

我正在使用Strapi和Next JS构建一个网站,我无法访问数组中的文本。我试图动态地将数据从strapi拉入创建的组件中,称为info_block,其中包括图像(媒体),标题(短文本字段)和内容(文本)。infoblock wireframe
目前,富文本字段在浏览器中无法呈现,我相信我的困难与包含对象数组的富文本字段有关。那些在在线讨论中发帖的人在JSON中的级别没有我多,我不知道为什么。
编辑:Strapi有两种不同的富文本数据类型。有富文本块和富文本标记类型。富文本(块)将段落呈现为对象。如果我使用Richtext标记,那么我可以获取我需要的strapi数据,而不需要使用回调函数来过滤数组。

INFOBLOCK JSON FROM API
 
"info_blocks": {
  "data": [
    {
      "id": 1,
      "attributes": {
        "Headline": "the experience.",
        "ShowImageRight": false,
        "createdAt": "2023-12-16T22:36:41.184Z",
        "updatedAt": "2023-12-22T23:32:56.637Z",
        "publishedAt": "2023-12-16T22:38:43.325Z",
        "content": [
          {
            "type": "paragraph",
            "children": [
              {
                "type": "text",
                "text": "At Sam’s Surfcamp, we invite you to embark on an unforgettable surfing adventure. Nestled in the heart of [Location] our surf camp offers an exhilarating experience for beginners, intermediate surfers, and seasoned wave riders alike."
              }
            ]
          },
        {
          "type": "paragraph",
          "children": [
            {
              "type": "text",
              "text": ""
            }
          ]
        },
      ],
      "Image": {},
      "button": {}
    }
  ]
}

个字符
按钮和标题渲染,但文案没有

REACT INFOBLOCK COMPONENT

const InfoBlock = ({ data }) => {
    const { Headline, content, showImageRight, imageSrc, button } = data;
    
    return (
        <div className={`info ${showImageRight ? "info--reversed" : ""}`}>
            <img className="info__image" src={imageSrc || "/info-block-1.png"} alt="" />
            <div className="info__text">
                <h2 className="info__headline">{Headline}</h2>
                {content}
                {button}
            </div>
        </div>
    );
};

export default InfoBlock;


目前,我试图调用的信息记录在console.log(paragraph.children[0].text)的控制台中,但在我的infoblock组件中没有定义。

STRAPI UTILS FILE

export function processInfoBlocks(data) {
    const infoBlocksRaw = data.attributes.info_blocks.data;

    return infoBlocksRaw.map((infoBlock) => ({
        ...infoBlock.attributes,
        imageSrc: BASE_URL + infoBlock.attributes?.Image?.data?.attributes?.url,
        id: infoBlock.id,
        /* calling the method created below and assigning it to content */
        content: createInfoBlockContent(infoBlock.attributes?.content),
        button: createInfoBlockButton(infoBlock.attributes?.button),
    }));
}

function createInfoBlockContent(contentData) { 
    return (
        contentData.map((paragraph) => {
            <p className="copy">{paragraph.children[0].text}</p>
            {console.log(paragraph.children[0].text)}
        })
    );
}


在Strapi admin中,我使用的是单一的页面类型,只是为了练习,其中包括3个信息块。有人知道以下内容吗:

  1. Strapi Richtext API是否已更新,由对象而不是字符串组成?
    1.如何访问json文件中的对象数组?由于“Headline”可以获取,我相信这是我的难点。
    我所做的最接近的工作是通过Map数组,并将结果记录到控制台。现在我只需要弄清楚为什么组件数据结果是未定义的。
    让我知道如果有更多的信息,我可以添加到这篇文章。谢谢你的阅读!
hi3rlvi2

hi3rlvi21#

你不能直接从块中渲染markdown或json。对于markdown,你必须使用像https://www.npmjs.com/package/markdown-to-jsx这样的东西
对于块,渲染块的标准模式为:

content.map(({ type, children }) => {
  switch(type) {
    case 'paragraph': 
       return <MyParagraph {...children}/>;
    defalut: 
      return null;
  }
}))

字符串
我看到children是一个数组,怀疑它是用来处理bolditalic.

const BlocksRenderer = ({content}) => content.map(({type, children}) => {
  switch(type) {
    case 'paragraph': 
       return <p><TextSubsetRenderer items={children}/><p/>;
    defalut: 
      return null;
  }
});

export default BlocksRenderer;
const TextSubsetRenderer = ({items}) => items.map(({type, text}) => {
  switch(type){
    case 'text': 
      return <span>{text}<span>;
    default
      return null;
  }
})

export default TextSubsetRenderer;

的数据
我猜这种方法可能有点小改动(使用函数而不是组件等)......但逻辑上看起来不错......
无论如何,已经有一个插件来渲染块

我也建议使用这两个插件之一:

关于你的问题,不知道为什么你需要过滤...或者你想过滤什么,如果你渲染块,你必须Map和切换。如果你渲染markdown,你需要markdown处理器...

相关问题