fix: 修复CustomSelect组件null值警告

- 修复ProjectTemplateBindingList中activeFilter为null时传递给select元素的问题
- 更新getActiveFilterOptions函数,将null值改为空字符串
- 改进CustomSelect组件的类型定义和null值处理
- 添加safeValue转换确保select元素接收有效的字符串值
- 解决React警告:'value prop on select should not be null'
This commit is contained in:
imeepos 2025-07-15 13:21:30 +08:00
parent 8f1355ba16
commit 0b9a90771a
2 changed files with 9 additions and 7 deletions

View File

@ -2,17 +2,19 @@ import { ChevronDownIcon } from "lucide-react";
// 自定义下拉选择组件 // 自定义下拉选择组件
export const CustomSelect: React.FC<{ export const CustomSelect: React.FC<{
value: string | any; value: string | number | null | undefined;
onChange: (value: string) => void; onChange: (value: string) => void;
options: { value: string | any; label: string; description?: string }[]; options: { value: string | number; label: string; description?: string }[];
placeholder?: string; placeholder?: string;
className?: string; className?: string;
disabled?: boolean; disabled?: boolean;
}> = ({ value, onChange, options, placeholder, className = '', disabled = false }) => { }> = ({ value, onChange, options, placeholder, className = '', disabled = false }) => {
// 确保 value 是字符串,处理 null 和 undefined
const safeValue = value === null || value === undefined ? '' : String(value);
return ( return (
<div className={`relative ${className}`}> <div className={`relative ${className}`}>
<select <select
value={value} value={safeValue}
onChange={(e) => onChange(e.target.value)} onChange={(e) => onChange(e.target.value)}
disabled={disabled} disabled={disabled}
className={`w-full appearance-none bg-white border border-gray-200 rounded-lg px-3 py-2 pr-8 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 hover:border-gray-300 cursor-pointer ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`} className={`w-full appearance-none bg-white border border-gray-200 rounded-lg px-3 py-2 pr-8 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 hover:border-gray-300 cursor-pointer ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}

View File

@ -150,9 +150,9 @@ export const ProjectTemplateBindingList: React.FC<ProjectTemplateBindingListProp
]; ];
const getActiveFilterOptions = () => [ const getActiveFilterOptions = () => [
{ value: null, label: '全部' }, { value: '', label: '全部' },
{ value: true, label: '已激活' }, { value: 'true', label: '已激活' },
{ value: false, label: '已停用' }, { value: 'false', label: '已停用' },
]; ];
if (loading) { if (loading) {
@ -207,7 +207,7 @@ export const ProjectTemplateBindingList: React.FC<ProjectTemplateBindingListProp
{onActiveFilterChange && ( {onActiveFilterChange && (
<CustomSelect <CustomSelect
value={activeFilter} value={activeFilter === null ? '' : activeFilter.toString()}
onChange={(value) => onActiveFilterChange(value === 'true' ? true : value === 'false' ? false : null)} onChange={(value) => onActiveFilterChange(value === 'true' ? true : value === 'false' ? false : null)}
options={getActiveFilterOptions()} options={getActiveFilterOptions()}
className="min-w-[100px]" className="min-w-[100px]"