Reactjs 健全草稿预览不使用块内容

我已经完成了两次博客创作体验的迭代。第一个由不同对象和文档类型（如段落、图库、引用等）组成的数组，而第二个（也是最新的一个）利用块内容简化流程。但是，我无法使用块内容获得草稿预览，因为它可以很好地处理组件数组

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

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>
      );
    },
  },
};

---

现在，如果我去创建一篇新的博客文章，并用任何东西填充

博客内容

，然后按草稿预览，它会从前端显示模板，但没有内容，并且在检查器中我得到

警告：失败的道具类型：道具块在SanityBlockContent中标记为所需，但其值未定义。

这是因为块内容未传递到模板。现在，如果我将块内容替换为任何其他内容（如文本组件），预览效果会很好，问题似乎只是块内容。

@hackape肯定在问一个问题，我也想知道答案。如何提供页面上下文

我看到的一件事是，在您对

pageContext

的解构中，

blogPost

可能没有定义，并且您提供了一个空对象的默认值

这意味着

blogPost.content

将是未定义的，这解释了您的错误

您可以提供更好的默认值，例如

{content:'}

，或者您可以选择在获得内容值之前不呈现

：

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

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

return null

const{blogPost={content:'}}=pageContext
if（blogPost.content！==未定义）{
返回
}
返回空

您的问题描述缺乏细节。您的

Preview

组件如何与

blogPost

模式连接？我浏览了文档，从我的理解来看，至少模式中应该有

预览

属性，对吗？

健全

框架看起来很整洁，但它离流行的框架还很远。我第一次听说这件事。因此，如果您可以提供代码repo来展示您的问题，并且只需最少的设置，那么这将非常容易，这样人们就可以

npm安装

和

npm启动

并开始诊断。目前我只能猜测。你能不能以某种方式重现这个问题@史密斯先生很抱歉，这实际上并不是你问题的完整答案。只是评论上有个字符限制。。。如果您提供更多详细信息，我将努力编辑我的答案，以帮助提供更彻底的解决方案