使用MuiAutocomplete多选时出现循环结构转JSON错误求助

问题复现 #

单选功能正常，但多选模式下抛出以下错误：

Converting circular structure to JSON --> starting at object with constructor 'Object' |     property '_context' -> object with constructor 'Object' --- property 'Provider' closes the circle TypeError: Converting circular structure to JSON --> starting at object with constructor 'Object' |     property '_context' -> object with constructor 'Object'

使用的options结构：

[
 {
  id: 1, label: 'one'
 },
 {
  id: 2, label: 'two'
 }
]

依赖版本：

React 18.2.0
@mui/material 5.14.1
@emotion/react 11.11.1
@emotion/styled 11.11.0

核心原因 #

多选模式下，组件的value或选中值数组中混入了带有React上下文（_context）的对象（比如误传React元素、组件实例或绑定了上下文的对象），导致后续JSON序列化操作触发循环引用错误。

解决步骤 #

1. 规范onChange的参数处理
   多选模式下，onChange的第二个参数newValue是选中的纯option对象数组，必须直接用它更新状态，不要误传event或其他带上下文的对象：

   import { useState } from 'react';
   import Autocomplete from '@mui/material/Autocomplete';
   import TextField from '@mui/material/TextField';
   
   const options = [
     { id: 1, label: 'one' },
     { id: 2, label: 'two' }
   ];
   
   export default function MultiSelectAutocomplete() {
     const [selectedValues, setSelectedValues] = useState([]);
   
     return (
       <Autocomplete
         multiple
         options={options}
         value={selectedValues}
         onChange={(event, newValue) => {
           setSelectedValues(newValue);
         }}
         renderInput={(params) => (
           <TextField {...params} label="多选选项" placeholder="选择" />
         )}
       />
     );
   }
   

2. 检查状态初始化与更新
   确保selectedValues的初始值和后续更新值都是纯option对象数组，不要混入React组件实例、元素或其他带循环引用的对象。

3. 配置正确的getOptionSelected（可选）
   如果自定义了选项选中逻辑，确保用唯一标识（如id）比较，避免对象引用比较导致的异常：

   <Autocomplete
     // ...其他属性
     getOptionSelected={(option, value) => option.id === value.id}
   />
   

4. 排查JSON序列化场景
   如果代码中有对selectedValues执行JSON.stringify的逻辑，确认序列化的是纯option对象，没有额外添加React相关属性。

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