Sanity：如何基于同文档中另一字段填充预定义字符串列表？

问题出在默认string字段的options.list动态函数无法实时响应category字段的变化——这里的document参数仅能获取初始值，不会随字段更新同步。要实现联动效果，需要自定义section字段的输入组件，借助Sanity的useFormValue钩子实时获取category的最新取值。

步骤1：创建自定义下拉选择组件 #

编写一个监听category变化的自定义组件：

import { useFormValue } from '@sanity/react-hooks'
import { Select } from '@sanity/ui'

export const SectionSelect = (props) => {
  const category = useFormValue(['category'])
  let options = []

  // 根据category动态生成选项
  if (category === 'food') {
    options = [
      { value: 'option 0', label: '选项0' },
      { value: 'option 1', label: '选项1' }
    ]
  } else {
    options = [
      { value: 'option 2', label: '选项2' },
      { value: 'option 3', label: '选项3' }
    ]
  }

  return (
    <Select
      {...props}
      options={options}
      disabled={!category}
    />
  )
}

步骤2：修改section字段定义 #

替换原字段配置，使用自定义组件：

defineField({
  name: 'category',
  type: 'string',
  title: '分类',
  options: { list: ['food', 'grocery', 'food stuff', 'super market'] },
  initialValue: 'food',
  validation: (rule) => rule.required(),
}),
defineField({
  name: 'section',
  type: 'string',
  title: '分区',
  components: {
    input: SectionSelect // 绑定自定义组件
  },
  hidden: ({ document }) => !document?.category,
}),

原代码失效原因 #

默认options.list的动态函数仅在字段初始化时读取文档快照，不会监听category字段的实时修改。而useFormValue钩子可以实时获取表单内其他字段的最新值，从而实现选项的动态切换。

内容的提问来源于stack exchange，提问作者Abdirisak