Select Empty Value Error - FIXED ✅

Issue

Error occurred in the OperationTask.tsx component:

Error: A <Select.Item /> must have a value prop that is not an empty string. 
This is because the Select value can be set to an empty string to clear the 
selection and show the placeholder.

Root Cause

The multi-dimensional filter Select components in the "历史与统计" (History & Statistics) tab were using value="" (empty string) for the "全部" (All) options, which is not allowed by Radix UI Select.

Solution Applied ✅

Changed From (INCORRECT):

<Select value={statisticsFilters.fieldId}>
  <SelectItem value="">全部地块</SelectItem>  ❌ Empty string not allowed
  <SelectItem value="field-1">东区1号地</SelectItem>
</Select>

Changed To (CORRECT):

<Select 
  value={statisticsFilters.fieldId || "all"}
  onValueChange={(value) => setStatisticsFilters({ 
    ...statisticsFilters, 
    fieldId: value === "all" ? "" : value 
  })}
>
  <SelectItem value="all">全部地块</SelectItem>  ✅ Uses "all" instead
  <SelectItem value="field-1">东区1号地</SelectItem>
</Select>

Fixed Components

All 4 filter Select components in the statistics tab:

地块筛选 (Field Filter)
- Value: "all" instead of ""
- Display: "全部地块"
作物筛选 (Crop Filter)
- Value: "all" instead of ""
- Display: "全部作物"
人员筛选 (Personnel Filter)
- Value: "all" instead of ""
- Display: "全部人员"
任务类型筛选 (Task Type Filter)
- Value: "all" instead of ""
- Display: "全部类型"

Implementation Details

Value Handling

Display Value: Uses value || "all" to show "all" when internal state is empty

Change Handler: Converts "all" back to empty string for internal filtering logic

onValueChange={(value) => setStatisticsFilters({ 
  ...statisticsFilters, 
  fieldId: value === "all" ? "" : value 
})}

Filter Logic

The internal filter logic remains unchanged - it still uses empty strings to represent "no filter":

const filteredArchivedTasks = archivedTasks.filter(t => {
  if (statisticsFilters.fieldId && t.fieldId !== statisticsFilters.fieldId) 
    return false;
  // ... other filters
  return true;
});

Result

✅ Error eliminated ✅ Functionality preserved ✅ User experience unchanged ✅ All 4 filter dropdowns now work correctly

Testing

To verify the fix:

Navigate to: 农事任务 > 历史与统计
Use the multi-dimensional query filters
Select "全部XX" options - should work without errors
Filtering logic should work correctly
Reset button should work properly

Files Modified

/components/operation/OperationTask.tsx
- Fixed 4 Select components in statistics filter section
- Lines approximately 1380-1440

Date Fixed

2025-01-20

Status

✅ RESOLVED - Error no longer occurs

2.9 KiB Raw Blame History