如何修复TypeError: Converting circular structure to JSON报错

错误原因 #

你使用Material UI的Select组件时，错误地将事件对象直接存入了values.price字段：

• Material UI的Select组件onChange回调的第一个参数是合成事件对象，不是选中值
• 事件对象内置的view属性指向Window对象，存在大量循环引用
• 你在页面底部调用了JSON.stringify(values)序列化整个状态，碰到循环引用就抛出了对应错误

修复步骤 #

1. 修复付费选择Select #

将原来的取反逻辑改为直接读取事件对象的选中值，写法更规范：

<Select
  color="secondary"
  style={{ width: "100%", color: "white" }}
  value={values.paid}
  // 从事件对象拿选中值
  onChange={(e) => setValues({ ...values, paid: e.target.value })}
>
  <MenuItem value={true}>Paid</MenuItem>
  <MenuItem value={false}>Free</MenuItem>
</Select>

2. 修复价格选择Select #

首先给MenuItem补全value属性，再修改onChange读取事件对象的选中值，同时改为受控组件写法绑定状态：

<Select
  // 绑定状态代替defaultValue，符合受控组件规范
  value={values.price || 100}
  style={{ width: "100%" }}
  // 从事件对象拿选中值存入price字段
  onChange={(e) => setValues({ ...values, price: e.target.value })}
  size="large"
>
  <MenuItem value={100}>100</MenuItem>
  <MenuItem value={200}>200</MenuItem>
</Select>

可选优化 #

在初始values状态里补全category字段，避免未定义问题：

const [values, setValues] = useState({
  name: "",
  description: "",
  price: "",
  uploading: false,
  paid: true,
  loading: false,
  category: "" // 新增分类初始值
});

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