React+TypeScript中使用MUI Select组件渲染元素时遇异常求助

问题现象 #

使用MUI Select组件选择选项时出现以下异常：

• 选择任意选项后，下拉列表中的第一个选项会变为首次选中的内容
• 控制台抛出MUI警告：

act_devtools_backend_compact.js:2367 MUI: You have provided an out-of-range value 0 for the select component.
Consider providing a value that matches one of the available options or ''.
The available values are 3, 1, 2, 3.

• 页面渲染的元素始终是ItemTypes[0]对应的组件

错误原因分析 #

1. 赋值操作替代比较操作：在选择事件处理函数的find条件中，误写为s.value = event.target.value（赋值）而非s.value === event.target.value（比较）。这会导致每次触发选择时，数组中第一个元素的value被修改为当前选中的值，进而出现重复值触发MUI警告，同时find永远只会返回被修改的第一个元素，导致渲染内容不变。
2. Select组件值未与状态绑定：当前Select的value硬编码为"0"，未与item状态同步，组件无法正确感知选中状态变化。
3. 初始状态与组件默认值不匹配：useState初始值为undefined，但Select默认选中"0"，状态与组件值不一致，加剧了同步问题。

修复后的完整代码 #

组件代码 #

import { useState } from 'react';
import { Container, FormGroup, FormControl, InputLabel, Select, MenuItem, Box } from '@mui/material';
import { SelectChangeEvent } from '@mui/material/Select';
import ItemTypes from './ItemTypes';
import { ItemType } from './ItemType';

function ItemConfig() {
    // 初始化状态为第一个选项，与Select默认值匹配
    const [item, setItem] = useState<ItemType>(ItemTypes[0]);

    const handleItemSelect = (event: SelectChangeEvent) => {
        // 使用===进行值比较，而非赋值
        const selectedItem = ItemTypes.find(s => s.value === event.target.value);
        if (selectedItem) {
            setItem(selectedItem);
        }
    };

    return (
        <Container>
            <FormGroup>
                <FormControl sx={{ marginBottom: 1 }}>
                    <InputLabel variant='standard' htmlFor="itemType">
                        Item Type
                    </InputLabel>
                    <Select
                        label="itemType"
                        onChange={handleItemSelect}
                        // 将value与状态绑定，确保同步
                        value={item.value}
                    >
                        {ItemTypes.map((item, index) => (
                            <MenuItem value={item.value} key={index}>
                                {item.label}
                            </MenuItem>
                        ))}
                    </Select>
                </FormControl>
                <Box>
                    {item.element}
                </Box>
            </FormGroup>
        </Container>
    );
}

export default ItemConfig;

ItemType类型定义（无需修改） #

import { ReactNode } from "react";

export type ItemType = {
  element: ReactNode,
  label: string,
  value: string,
};

ItemTypes数组（无需修改） #

import Type0 from './Type0';
import Type1 from './Type1';
import Type2 from './Type2';
import Type3 from './Type3';
import { ItemType } from './ItemType';

const ItemTypes: ItemType[] = [
    {
        label: "Type 0",
        value: "0",
        element: <Type0/>
    },
    {
        label: "Type 1",
        value: "1",
        element: <Type1/>
    },
    {
        label: "Type 2",
        value: "2",
        element: <Type2/>
    },
    {
        label: "Type 3",
        value: "3",
        element: <Type3/>
    },
];

export default ItemTypes;

关键修复点总结 #

• 将find方法中的赋值操作=替换为严格比较===，避免修改原数组元素
• 让Select组件的value与item状态绑定，实现选中状态的双向同步
• 初始化useState时设置为ItemTypes[0]，确保初始状态与组件默认选中值一致

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