为什么在 Sanity.IO 中没有正确准备渲染答案

【问题标题】：Why Doesn't Prepare Render Properly in Sanity.IO为什么在 Sanity.IO 中没有正确准备渲染
【发布时间】：2019-12-13 04:57:56
【问题描述】：

我正在尝试为sanity.io 中的文档自定义 prview 部分。为此，我创建了以下文档：

export default {
  name: 'news',
  type: 'document',
  title: 'News',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
    },
    ...
    {
      name: 'author',
      title: 'Author',
      type: 'string',
    },
    ...
  ],
  preview: {
    select: {
      title: 'title',
      subtitle: 'author',
    }
  }
}

这完全符合我在 Studio 中的要求。预览窗格中的title 部分显示文档的标题，subtitle 部分显示作者姓名。

但是，如果我尝试使用prepare 修改author 的输出，则它不再起作用。例如，看一下同一文档的以下变体：

export default {
  name: 'news',
  type: 'document',
  title: 'News',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
    },
    ...
    {
      name: 'author',
      title: 'Author',
      type: 'string',
    },
    ...
  ],
  preview: {
    select: {
      title: 'title',
      author: 'author',
    }
  },
  prepare(selection) {
    const { author } = selection
    return {
      ...selection,
      subtitle: author && `${author} is the author`
    }
  }
}

title 预览字段已呈现，但 subtitle 部分中没有显示任何内容。但是，据我了解 - 这应该有效。我想知道为什么不。

有什么想法吗？

【问题讨论】：

标签： sanity

【解决方案1】：

prepare实际上是预览中调用的函数。您将其作为根对象的单独字段。像这样在preview 中移动准备：

preview: {
  select: {
    title: 'title',
    author: 'author'
  },
  prepare(selection) {
    const { author } = selection
    return {
      ...selection,
      subtitle: author && `${author} is the author`
    }
  }
}

【讨论】：