KeystoneJS模型中如何用接口数据动态填充Select组件选项？

首先得说，你用pre('find')钩子的思路走偏啦——这个Mongoose钩子是在查询数据库文档前触发的，和AdminUI渲染表单时的下拉选项半毛钱关系都没有，自然没法绑定数据到选项里。下面给你几个靠谱的实现思路，分不同场景：

场景1：启动时加载一次选项（适合数据不频繁更新的情况） #

如果你的受众数据不会经常变动，可以在Keystone初始化前先拉取一次数据，再把它赋值给Schema里的options：

// 先预加载受众数据
let audienceOptions = [];
async function loadAudiences() {
  try {
    const audiences = await audienceService.getAudiences();
    // 把接口返回的数据转换成Keystone Select字段需要的格式：{ value: '值', label: '显示文本' }
    audienceOptions = audiences.map(item => ({
      value: item.id, // 假设接口返回的每条数据有唯一id
      label: item.name // 假设接口返回的名称字段是name
    }));
  } catch (err) {
    console.error('加载受众数据失败:', err);
  }
}

// 加载完成后再定义Schema
loadAudiences().then(() => {
  Compliance.add({
    title: { type: Types.Text, required: true, initial: true, index: true },
    url: { type: Types.Url, required: true, initial: true },
    position: { type: Types.Number, initial: true },
    audience: { 
      type: Types.Select, 
      options: audienceOptions, 
      many: true, 
      initial: true
    },
  });
});

这种方式的好处是简单，但数据更新后需要重启Keystone才能同步到AdminUI。

场景2：每次打开表单都获取最新选项（适合数据实时性要求高的情况） #

如果受众数据经常变，需要每次打开表单都拉取最新数据，那自定义AdminUI的字段组件是最优解：

第一步：修改Schema，指定自定义组件 #

Compliance.add({
  // ...其他字段
  audience: { 
    type: Types.Select, 
    options: [], // 这里留空就行，组件会自己获取数据
    many: true, 
    initial: true,
    component: require('./CustomAudienceSelect') // 引入自定义组件
  },
});

第二步：写自定义React组件（CustomAudienceSelect.js） #

import React, { useState, useEffect } from 'react';
// 可以用Keystone自带的Select组件，也可以用react-select这类第三方库
import { Select } from '@keystonejs/admin-ui/components';

const CustomAudienceSelect = ({ field, value, onChange }) => {
  const [options, setOptions] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  // 组件挂载时拉取数据
  useEffect(() => {
    async function fetchOptions() {
      try {
        const audiences = await audienceService.getAudiences();
        const formattedOptions = audiences.map(item => ({
          value: item.id,
          label: item.name
        }));
        setOptions(formattedOptions);
      } catch (err) {
        console.error('获取受众选项失败:', err);
      } finally {
        setIsLoading(false);
      }
    }
    fetchOptions();
  }, []);

  // 处理多选变化
  const handleSelectChange = (selectedValues) => {
    onChange(selectedValues);
  };

  if (isLoading) {
    return <div>加载中...</div>;
  }

  return (
    <Select
      isMulti={field.many}
      options={options}
      value={value}
      onChange={handleSelectChange}
    />
  );
};

export default CustomAudienceSelect;

这种方式每次打开表单都会请求WebService，保证选项是最新的。

场景3：如果你用的是Keystone 6+（新版） #

新版Keystone提供了更简洁的方式，直接用字段的resolveSelectOptions异步钩子，不需要自定义组件：

import { select } from '@keystone-6/core/fields';

const Compliance = list({
  fields: {
    title: { type: text({ isRequired: true, isIndexed: true }) },
    url: { type: url({ isRequired: true }) },
    position: { type: integer() },
    audience: select({
      many: true,
      isInitial: true,
      // 这个钩子会在AdminUI渲染表单时调用
      resolveSelectOptions: async () => {
        const audiences = await audienceService.getAudiences();
        return audiences.map(item => ({
          label: item.name,
          value: item.id
        }));
      },
    }),
  },
});

总结一下 #

• 别再用pre('find')钩子啦，它管的是数据库查询，不管表单渲染
• 数据不常变→启动时预加载
• 数据常变→自定义组件（Keystone 4）或者用resolveSelectOptions（Keystone 6+）

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