4

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

这是用于草稿预览的模板：

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.这是因为块内容没有被传递到模板。现在，如果我用其他任何内容（例如文本组件）替换块内容，预览工作正常，似乎问题只是块内容。

4

1 回答 1

2

@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
于 2020-09-29T20:05:51.433 回答