reactjs - 健全的草稿预览不适用于 block 内容

Question

我已经进行了两次博客创建体验的迭代。第一个由一系列不同的对象和文档类型组成，例如段落、图库、引用等，而第二个也是最新的一个，利用块内容来简化流程。但是，我无法使用块内容获得草稿预览，而它可以与组件数组一起正常工作。
这是用于草稿预览的模板:

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有任何东西并按下草稿预览，它显示前端的模板但没有内容，在检查器中我得到 Warning: Failed prop type: The prop blocks is marked as required in SanityBlockContent, but its value is undefined.这是因为块内容没有传递给模板。现在，如果我用其他任何内容(例如文本组件)替换块内容，则预览工作正常，似乎问题只是块内容。

Answer 1

@hackape 肯定在问一个我也想要答案的问题。 pageContext 是如何提供的？
我看到的一件事是它在您对 pageContext 的解构中的样子, blogPost可能未定义，并且您提供的是空对象的默认值。
这意味着 blogPost.content将是 undefined 这解释了您的错误。
您可以提供更好的默认值，例如 { content: '' }或者您可以选择不渲染 <BlockContent />直到你有一个内容值:

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

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

return null