如何获取与设置Material-UI Autocomplete多选值？按指南实现后无法取值

你的代码核心问题在于onChange事件的处理逻辑错误：当开启multiple模式时，onChange回调的newValue参数已经是当前所有选中项组成的数组，不需要再和原状态数组拼接，否则会形成嵌套数组（比如选第二个选项时，状态会变成[之前的数组, 新的选中数组]），导致无法正确获取选中值。

修正后的代码 #

import { useState } from 'react';
import { Autocomplete, TextField } from '@mui/material';

// 定义类型，避免使用any
type Category = {
  id: number;
  name: string;
};

const categories: Category[] = [
  { id: 1, name: "blog" },
  { id: 2, name: "music" },
  { id: 3, name: "video" },
];

export default function CategoryAutocomplete() {
  // 明确状态类型
  const [category, setCategory] = useState<Category[]>([]);

  // 测试获取值的方法
  const handleSubmit = () => {
    console.log("选中的分类：", category);
    // 这里可将category提交到后端或做其他处理
  };

  return (
    <>
      <Autocomplete
        multiple
        limitTags={1}
        value={category}
        // 直接用newValue更新状态
        onChange={(event, newValue) => {
          setCategory(newValue);
        }}
        id="category-filter"
        options={categories}
        getOptionLabel={(option) => option.name}
        renderInput={(params) => (
          <TextField {...params} label="Category" placeholder="categories" />
        )}
      />
      {/* 按钮用于测试获取选中值 */}
      <button onClick={handleSubmit}>查看选中值</button>
    </>
  );
}

关键修正点 #

• 移除错误的数组拼接逻辑，直接将newValue赋值给状态
• 添加明确的类型定义，替换any类型，提升代码可读性与类型安全
• 增加handleSubmit函数示例，展示如何在需要时获取选中的category状态值

现在你可以通过category状态直接获取所有选中的选项，比如在表单提交时使用这个状态即可。

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