NextJs+TypeScript项目中PrimeReact Dropdown遇对象渲染报错

错误原因 #

报错“Objects are not valid as a React child (found: object with keys {name, code})”的核心原因有两个：

1. PrimeReact的Dropdown组件默认无法识别你传入的options数组里的对象结构，会直接尝试渲染整个对象，但React不允许将对象作为子元素渲染。
2. 代码里存在变量名错误——value={selectedCity1}中的selectedCity1是未定义的，应该和状态变量selectedCat保持一致。

解决方案 #

• 修正变量名，让Dropdown的value属性与状态变量匹配
• 通过optionLabel指定下拉选项的显示文本字段，通过optionValue可选指定绑定的值字段
• 完善TypeScript类型定义，避免使用any保证类型安全

修正后的代码 #

// 定义类型替代any，提升类型安全
type CatType = {
  name: string;
  code: string;
};

const catTypes: CatType[] = [
    { name: 'Brand', code: 'B' },
    { name: 'Category', code: 'C' },
    { name: 'Title', code: 'T' },
];

const [selectedCat, setSelectedCat] = useState<CatType | null>(null);

<Dropdown
  value={selectedCat}
  options={catTypes}
  // 指定显示的文本字段为name
  optionLabel="name"
  // 可选：指定选中时绑定的值为code，不设置则默认绑定整个对象
  optionValue="code"
  onChange={(e) => setSelectedCat(e.value)}
/>

关键说明 #

• optionLabel="name"：告诉组件渲染每个选项的name属性作为下拉列表的显示文本
• optionValue="code"：设置后选中的值会是对象的code属性，若省略该属性，选中的值将是整个CatType对象
• 定义CatType类型可以让状态变量的类型更明确，避免any带来的潜在类型问题

内容的提问来源于stack exchange，提问作者Chris Hunter-Johnson