reactjs 在RICHTEXT_OPTIONS内获取内容丰富的资产,并进行异步等待

wwwo4jvm  于 2023-02-15  发布在  React
关注(0)|答案(1)|浏览(106)

我使用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子对象无效。因为承诺未正确解析。如何解决此问题?(我正在使用功能组件)。

ycl3bljg

ycl3bljg1#

节点对象包含资源字段。

// …
[BLOCKS.EMBEDDED_ASSET]: (node) => {
  console.log(node);

  // Logs:
  //{
  //  nodeType: 'embedded-asset-block',
  //  data: { target: { metadata: [Object], sys: [Object], fields: [Object] } },
  //  content: []
  //}

  return;
},

因此,您不必担心呈现器中的承诺,但是,您会遇到typescript的问题,因为@contentful/rich-text-types不包括metadatafields字段到其类型中。

[BLOCKS.EMBEDDED_ASSET]: (node) => {
      return (
         <Image
           width={400}
           height={400}
           src={node.data.target.fields.file.url}
           alt="random desc"
         />
      );
    },

你的问题是你没有等待getUrls(id)的结果。在渲染器中添加await会使它异步,我不确定它是否能工作。

相关问题