我使用contentful沿着react来呈现文章的内容,我使用contentful中的documentToReactComponent。
当你给这个函数传递一个来自contentful的内容数组和一些选项时,它会遍历这个数组,并将数据呈现在html中。我的问题是:由于某种原因,我需要使用client.getAsset(id)来获取帖子的图片,因为contentful发送的是每个图片的id而不是发送url...这给了我一个错误,因为我可以解决返回数据的承诺。
下面是代码(更简单的版本):
const RICHTEXT_OPTIONS = {
renderNode: {
[BLOCKS.PARAGRAPH]: (node: Block | Inline, children: ReactNode) => {
return <p>{children}</p>;
},
[INLINES.HYPERLINK]: (node: Block | Inline, children: ReactNode) => {
return <a href={node?.data.uri}>{children}</a>;
},
// issue with the promise below
[BLOCKS.EMBEDDED_ASSET]: (node: Block | Inline) => {
const id = node?.data.target.sys.id;
async function getUrls(id: string) {
const Img = await client
.getAsset(id)
.then((asset) => {
const imageURL = asset.fields.file.url;
const imageTitle = asset.fields.title || asset.fields.file.fileName;
return { imageURL, imageTitle };
})
.catch(console.error);
return Img;
}
const images = getUrls(id);
return (
<Image
width={400}
height={400}
src={`https://${images.imageURL}`}
alt="random desc"
/>
);
},
},
};
function ClickedArticle({ article }: { article: PostWithCoverImg }){
const { title, date, author, Img, content } = article;
return (
<div className={styles.clickedArticle__article__content}>
{documentToReactComponents(content as Document, RICHTEXT_OPTIONS)}
</div>
)
}
当我尝试异步等待EMBEDDED_ASSET块时,它返回一个错误:对象作为React子对象无效。因为承诺未正确解析。如何解决此问题?(我正在使用功能组件)。
1条答案
按热度按时间ycl3bljg1#
节点对象包含资源字段。
因此,您不必担心呈现器中的承诺,但是,您会遇到typescript的问题,因为
@contentful/rich-text-types
不包括metadata
和fields
字段到其类型中。你的问题是你没有等待
getUrls(id)
的结果。在渲染器中添加await
会使它异步,我不确定它是否能工作。