健全的草稿预览不适用于阻止内容

问题描述

我已经进行了两次博客创建经验的迭代。第一个由一系列不同的对象和文档类型组成，例如段落，画廊，报价等，而第二个（也是最新的）则利用块内容简化了流程。但是，我无法使用块内容来预览草稿，但它只能与组件数组配合使用。

以下是用于草稿预览的模板：

import React from 'react';
import BlockContent from '@sanity/block-content-to-react';

export default ({ pageContext,location }) => {
  const { blogPost = {} } = pageContext;

  return (
    <React.Fragment>
      <BlockContent blocks={blogPost.content} serializers={serializers} />
    </React.Fragment>
  );
};

const serializers = {
  types: {
    block(props) {
      const { style = 'normal' } = props.node;

      if (/^h\d/.test(style)) {
        let className = '';
        const level = style.replace(/[^\d]/g,'');
        switch (level) {
          case '1':
            className = 'domaine--medium-large mt1 mb2';
            break;
          case '2':
            className = 'sans--large mt2 mb1';
            break;
        }

        return (
          <div className="row align--center">
            <div className="col c10--md c7--lg">
              {React.createElement(style,{ className },props.children)}
            </div>
          </div>
        );
      }

      return (
        <div className="row align--center">
          <div className="col c10--md c7--lg">
            {React.createElement(
              style,{ className: 'sans--medium color--gray-text db mb1 mt1' },props.children,)}
          </div>
        </div>
      );
    },},};

然后在Sanity中设置博客内容：

import React from 'react';

/**
 * Defines the structure of a blog post.
 */
export default {
    name: 'blogPost',title: 'Blog Post',type: 'document',fields: [
        {
            name: 'content',title: 'Blog Content',type: 'blogPortableText'
        },],};

现在，如果我去创建一个新的博客帖子，并用任何内容填充Blog Content并按草稿预览，它会从前端显示模板，但没有内容，并且在检查器中我得到{{1 }}，这是因为块内容未传递到模板。现在，如果我用其他任何内容（例如，仅是文本组件）替换了块内容，则预览效果很好，看来问题出在块内容上。

解决方法

@hackape肯定也在问一个我也想回答的问题。如何提供pageContext？

我看到的一件事是，它在您对pageContext进行解构时似乎没有定义blogPost，而是您提供了一个空对象的默认值。

这意味着blogPost.content是未定义的，这解释了您的错误。

您可以提供更好的默认值，例如{ content: '' }，也可以选择不呈现<BlockContent />，直到您拥有内容值：

const { blogPost = { content: '' } } = pageContext

if (blogPost.content !== undefined) {
    return <BlockContent blocks={blogPost.content} serializers={serializers} />
}

return null