我正在使用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个信息块。有人知道以下内容吗:
- Strapi Richtext API是否已更新,由对象而不是字符串组成?
1.如何访问json文件中的对象数组?由于“Headline”可以获取,我相信这是我的难点。
我所做的最接近的工作是通过Map数组,并将结果记录到控制台。现在我只需要弄清楚为什么组件数据结果是未定义的。
让我知道如果有更多的信息,我可以添加到这篇文章。谢谢你的阅读!
1条答案
按热度按时间hi3rlvi21#
你不能直接从块中渲染markdown或json。对于markdown,你必须使用像https://www.npmjs.com/package/markdown-to-jsx这样的东西
对于块,渲染块的标准模式为:
字符串
我看到
children
是一个数组,怀疑它是用来处理bold
,italic
.的数据
我猜这种方法可能有点小改动(使用函数而不是组件等)......但逻辑上看起来不错......
无论如何,已经有一个插件来渲染块
我也建议使用这两个插件之一:
关于你的问题,不知道为什么你需要过滤...或者你想过滤什么,如果你渲染块,你必须Map和切换。如果你渲染markdown,你需要markdown处理器...