Formik集成Fluent UI v9 Dropdown组件异常问题求助

你的代码存在几个关键问题，导致Dropdown无法显示选中项且Formik状态不更新，以下是修复后的完整代码及问题解析：

修复后代码 #

import React from 'react';
import { Formik, Form, useField } from 'formik';
import { FluentProvider, Label, Dropdown, Option, teamsLightTheme } from '@fluentui/react-components';

// 选项数组
const options=[
  {value:0, label:"Not sure", disabled:false},
  {value:1, label:"We have been hit by a malware attack", disabled:false },
  {value:2, label:"Some or all people cannot work", disabled:false },
  {value:3, label:"A critical application cannot be used" , disabled:false},
  {value:4, label:"Work is slowed", disabled:false },
  {value:5, label:"Work is not disrupted - we have a technical question", disabled:false },
];

export async function saveItem(t){
  console.log(JSON.stringify(t, null, 2));
};

// 封装Fluent UI Dropdown的Formik组件
export function DropdownBox({ label, options, ...props }){
  const [field, meta] = useField(props);

  // 处理下拉选项选择事件
  const handleOptionSelect = (ev, data) => {
    // 更新Formik的全局状态
    field.onChange(data.selectedOptions[0]);
  };

  return (
    <div>
      <Label htmlFor={props.name}>{label}</Label>
      <Dropdown
        {...field}
        {...props}
        selectedOptions={[field.value]}
        onOptionSelect={handleOptionSelect}
      >
        {options.map((option) => (
          <Option key={option.value} value={option.value} disabled={option.disabled}>
            {option.label}
          </Option>
        ))}
      </Dropdown>
      {meta.touched && meta.error ? (
        <div className="error">{meta.error}</div>
      ) : null}
    </div>
  );
};

export default function MyForm(){
  const initialItem = {
    impact: 1,
  }

  return (
    <FluentProvider theme={teamsLightTheme}>
      <Formik
        initialValues={initialItem}
        onSubmit={async (values, { setSubmitting }) => {
          setTimeout(async () => {
            await saveItem(values);
            setSubmitting(false);
          }, 400);
        }}
      >
        <Form>
          <DropdownBox
            id="impact"
            name="impact"
            label="Business Impact" 
            options={options} 
          />
        </Form>
      </Formik>
    </FluentProvider>
  );
};

关键问题与修复说明 #

• 缺失核心导入：原代码未导入Formik的useField和Fluent UI的Option组件，导致基础功能无法正常触发。
• 本地状态与Formik状态冲突：原代码手动维护selectedOptions和value本地状态，破坏了Formik作为表单单一数据源的机制，导致组件显示与全局状态不同步。
• 事件处理逻辑错误：原onOptionSelect仅更新本地状态，未调用field.onChange通知Formik更新全局状态，导致提交时无法获取最新选中值。
• Dropdown属性配置错误：
  • 原代码用defaultValue设置初始值，但Formik表单应通过field.value控制组件状态，而非默认值。
  • selectedOptions应传入选项的value数组，而非label文本，Fluent UI v9的Dropdown通过value识别选中项。

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