Keystone JS（Node CMS）定制：实现国家与州级联下拉菜单

我之前在Keystone 6项目里踩过几乎一模一样的坑，给你几个亲测有效的解决方向，帮你搞定字段联动：

1. 自定义Admin UI字段组件（最直接的方案） #

如果默认的Select字段满足不了联动需求，自定义组件是最灵活的方式。核心思路是监听表单里国家字段的变化，动态更新州的选项：

• 首先创建一个自定义的州选择组件，利用Keystone提供的useForm钩子获取表单实时值：

import { useForm } from '@keystone-6/core/admin-ui';
import { Select } from '@keystone-6/core/admin-ui/components';
import { useEffect, useState } from 'react';

// 假设你有一个映射表或者API接口来根据国家获取州
const getStatesForCountry = (countryId) => {
  // 这里可以替换成从数据库查询或者API请求的逻辑
  const countryStateMap = {
    'usa': [{ label: 'California', value: 'ca' }, { label: 'Texas', value: 'tx' }],
    'canada': [{ label: 'Ontario', value: 'on' }, { label: 'Quebec', value: 'qc' }]
  };
  return countryStateMap[countryId] || [];
};

export const StateSelect = ({ field, form }) => {
  const { values } = useForm();
  const [stateOptions, setStateOptions] = useState([]);

  // 监听国家字段的变化，更新州选项
  useEffect(() => {
    if (values.country) { // 这里的`country`要和你表单里国家字段的path一致
      setStateOptions(getStatesForCountry(values.country));
    } else {
      setStateOptions([]);
    }
  }, [values.country]);

  return (
    <Select
      name={field.path}
      options={stateOptions}
      value={form.values[field.path] || ''}
      onChange={(e) => form.setValue(field.path, e.target.value)}
      placeholder="选择州/省"
    />
  );
};

• 然后在你的列表字段定义里，把州字段的component指定为这个自定义组件：

import { StateSelect } from './path/to/StateSelect';

export const YourList = list({
  fields: {
    country: select({
      options: [
        { label: '美国', value: 'usa' },
        { label: '加拿大', value: 'canada' }
      ],
      label: '国家'
    }),
    state: select({
      options: [], // 这里留空，由自定义组件动态生成
      label: '州/省',
      component: StateSelect // 指定自定义组件
    })
  }
});

2. 利用关联模型的动态查询（适合数据库关联的场景） #

如果你的州数据是存在数据库里，并且和国家模型是关联关系（比如State模型有country外键关联到Country模型），可以通过上下文查询动态获取选项：

在自定义组件里，用Keystone的useContext钩子拿到数据库上下文，当国家变化时直接查询对应的数据：

import { useForm, useContext } from '@keystone-6/core/admin-ui';

export const StateSelect = ({ field, form }) => {
  const { values } = useForm();
  const { context } = useContext();
  const [stateOptions, setStateOptions] = useState([]);

  useEffect(() => {
    const fetchStates = async () => {
      if (!values.country) return setStateOptions([]);
      
      const states = await context.db.State.findMany({
        where: { country: { id: values.country } },
        select: { id: true, name: true }
      });
      setStateOptions(states.map(s => ({ label: s.name, value: s.id })));
    };
    fetchStates();
  }, [values.country, context.db.State]);

  // 后续的Select渲染逻辑和之前一致
};

3. 排查你之前监听失败的可能原因 #

你之前尝试监听字段变化没成功，大概率是这几个问题：

• 用错了钩子：不要用普通的useState去监听，一定要用Keystone提供的useForm钩子获取表单的响应式values。
• 字段路径不对：确认你监听的字段名和列表定义里的path完全一致（比如如果是关系字段，可能是country.id而不是country）。
• Keystone版本差异：如果是Keystone 5，API和6完全不同，需要用controller或者viewController来处理，而不是useForm。

内容的提问来源于stack exchange，提问作者Zeeshan Afzal Satti