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

u3r8eeie  于 2024-01-09  发布在  其他
关注(0)|答案(1)|浏览(170)

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

  1. INFOBLOCK JSON FROM API
  2. "info_blocks": {
  3. "data": [
  4. {
  5. "id": 1,
  6. "attributes": {
  7. "Headline": "the experience.",
  8. "ShowImageRight": false,
  9. "createdAt": "2023-12-16T22:36:41.184Z",
  10. "updatedAt": "2023-12-22T23:32:56.637Z",
  11. "publishedAt": "2023-12-16T22:38:43.325Z",
  12. "content": [
  13. {
  14. "type": "paragraph",
  15. "children": [
  16. {
  17. "type": "text",
  18. "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."
  19. }
  20. ]
  21. },
  22. {
  23. "type": "paragraph",
  24. "children": [
  25. {
  26. "type": "text",
  27. "text": ""
  28. }
  29. ]
  30. },
  31. ],
  32. "Image": {},
  33. "button": {}
  34. }
  35. ]
  36. }

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

  1. REACT INFOBLOCK COMPONENT
  2. const InfoBlock = ({ data }) => {
  3. const { Headline, content, showImageRight, imageSrc, button } = data;
  4. return (
  5. <div className={`info ${showImageRight ? "info--reversed" : ""}`}>
  6. <img className="info__image" src={imageSrc || "/info-block-1.png"} alt="" />
  7. <div className="info__text">
  8. <h2 className="info__headline">{Headline}</h2>
  9. {content}
  10. {button}
  11. </div>
  12. </div>
  13. );
  14. };
  15. export default InfoBlock;


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

  1. STRAPI UTILS FILE
  2. export function processInfoBlocks(data) {
  3. const infoBlocksRaw = data.attributes.info_blocks.data;
  4. return infoBlocksRaw.map((infoBlock) => ({
  5. ...infoBlock.attributes,
  6. imageSrc: BASE_URL + infoBlock.attributes?.Image?.data?.attributes?.url,
  7. id: infoBlock.id,
  8. /* calling the method created below and assigning it to content */
  9. content: createInfoBlockContent(infoBlock.attributes?.content),
  10. button: createInfoBlockButton(infoBlock.attributes?.button),
  11. }));
  12. }
  13. function createInfoBlockContent(contentData) {
  14. return (
  15. contentData.map((paragraph) => {
  16. <p className="copy">{paragraph.children[0].text}</p>
  17. {console.log(paragraph.children[0].text)}
  18. })
  19. );
  20. }


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

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

hi3rlvi21#

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

  1. content.map(({ type, children }) => {
  2. switch(type) {
  3. case 'paragraph':
  4. return <MyParagraph {...children}/>;
  5. defalut:
  6. return null;
  7. }
  8. }))

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

  1. const BlocksRenderer = ({content}) => content.map(({type, children}) => {
  2. switch(type) {
  3. case 'paragraph':
  4. return <p><TextSubsetRenderer items={children}/><p/>;
  5. defalut:
  6. return null;
  7. }
  8. });
  9. export default BlocksRenderer;
  1. const TextSubsetRenderer = ({items}) => items.map(({type, text}) => {
  2. switch(type){
  3. case 'text':
  4. return <span>{text}<span>;
  5. default
  6. return null;
  7. }
  8. })
  9. export default TextSubsetRenderer;

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

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

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

展开查看全部

相关问题