你正在通过一个数组来创建多个<select>组件，但是所有的<select>都有相同的open属性值，所以它们一起打开和一起关闭，这是有意义的。它们也有相同的value属性值。
因此每个<select>需要具有其自己open值和其自己的value年龄。
一种解决方案是将open和age的useState钩子声明为数组。

const [open, setOpen] = useState(() => {
return Array(ViewChecklistItem.length).fill(false); // this will initialize the open useState hook  based on the length of your ViewChecklistItem so open = [false,false,false,false] if you have for example 4 items in the list
});

const [age, setAge] = useState(() => {
return Array(ViewChecklistItem.length).fill(''); // age = ['','','','']
});

现在，让我们更新我们的handleClose、handleClose和handleChange：

const handleClose = (index: number) : void => { 
var openArray: boolean[] = [...open];
openArray[index] = false;
setOpen(openArray);
};

const handleOpen = (index: number) : void => { 
var openArray: boolean[] = [...open];
openArray[index] = true;
setOpen(openArray);
};

const handleChange = (event: SelectChangeEvent<typeof age>,index: number) => {
var ageArray: string[] = [...age];
ageArray[index] = (event.target.value);
setAge(ageArray);
};

最后在jsx：

ViewChecklistItem.map((row,index) => ( // not that getting the index from the map function is very important here
<tr key={row.TaskId}>
<td>
        
<FormControl sx={{ m: 1, minWidth: 120 }}>
<InputLabel id="demo-controlled-open-select-label">Age</InputLabel>
<Select
  labelId="demo-controlled-open-select-label"
  id="demo-controlled-open-select"
  open={open[index]}
  onClose={()=>{handleClose(index)}}
  onOpen={()=>{handleOpen(index)}}
  value={age[index]}
  label="Age"
  onChange={(event: SelectChangeEvent<typeof age>)=>{handleChange(event, index)}}
>
  <MenuItem value={10}>Ten</MenuItem>
  <MenuItem value={20}>Twenty</MenuItem>
  <MenuItem value={30}>Thirty</MenuItem>
</Select>

ps：我对 typescript 不太熟悉