ReactJS MUI多选组件useState报解析错误：缺失分号，求指导

问题根源 #

你看到的“Missing semicolon”是假阳性错误，实际原因是TypeScript泛型语法未被正确识别，或代码里存在无效的高亮标记。

解决步骤 #

• 确认文件后缀：将组件文件后缀改为.tsx，因为<string[]>是TypeScript特有的泛型语法，.js/.jsx文件无法解析，会导致解析器语法判断混乱，触发错误提示。
• 移除无效标记：代码里的**useState<string[]>([])**中的**是高亮用的标记，实际代码中要删除，否则会直接导致语法错误。
• 补充分号（可选但规范）：虽然JavaScript允许自动分号插入，但为了符合ESLint规则，建议在变量声明、函数定义行末尾补充分号。

修正后的示例代码 #

import { useState } from 'react';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';

export const MuiMultiSelect = () => {
    const [countries, setCountries] = useState<string[]>([]);
    console.log({countries});

    const handleChange = (event) => {
        const value = event.target.value;
        setCountries(typeof value === 'string' ? value.split(',') : value);
    };

    return (
        <Select
            multiple
            value={countries}
            onChange={handleChange}
            renderValue={(selected) => selected.join(', ')}
        >
            <MenuItem value="China">中国</MenuItem>
            <MenuItem value="USA">美国</MenuItem>
            <MenuItem value="Japan">日本</MenuItem>
        </Select>
    );
};

额外排查（如果仍报错） #

如果是TSX文件但仍提示错误，检查ESLint配置：

• 确保安装了@typescript-eslint/eslint-plugin和@typescript-eslint/parser依赖
• 在.eslintrc.js中配置解析器：

  module.exports = {
      parser: '@typescript-eslint/parser',
      plugins: ['@typescript-eslint'],
      extends: [
          'eslint:recommended',
          'plugin:@typescript-eslint/recommended'
      ]
  };
  

内容的提问来源于stack exchange，提问作者sek-dev