React中fetch请求触发Converting circular structure to JSON错误如何处理

报错原因 #

你遇到的Converting circular structure to JSON报错核心原因是待序列化的body对象中存在循环引用（即对象A引用对象B，对象B又反向引用A），JSON.stringify原生不支持序列化这类结构。你直接对values全量展开赋值给body，而values大概率是从表单实例、响应式State或者useEffect加载的外部接口返回对象中获取的，这类对象通常会附带带有循环引用的内置属性/代理属性，导致序列化失败。

解决办法 #

• 优先筛选需要的字段构造body，不要全量展开values
  明确列出要传给后端的字段，只提取对应值构造body，避免带入冗余的循环引用属性，示例：

  // 假设后端只需要接收name、desc、config三个字段，按实际需求修改
  let body = {
    name: values.name,
    desc: values.desc,
    config: values.config
  }
  

• 如果需要全量传递values的内容，可以使用自定义序列化方法过滤循环引用
  实现一个带循环引用检测的序列化函数，替换原生的JSON.stringify：

  const stringifyIgnoreCircular = (target) => {
    const visited = new WeakSet();
    return JSON.stringify(target, (key, value) => {
      if (typeof value === 'object' && value !== null) {
        if (visited.has(value)) return;
        visited.add(value);
      }
      return value;
    })
  }
  

  调用时直接用stringifyIgnoreCircular(body)替换原来的JSON.stringify(body)即可。

• 额外优化：补充异步错误捕获，避免Unhandled Rejection报错
  你当前的代码混用了await和.then，且没有做错误捕获，建议调整写法如下：

  const handleSubmit = async values => {
    // 按实际需求构造body
    let body = {
        name: values.name,
        desc: values.desc
    }
    setSubmitted(true);
    try {
      const res = await fetch(config.baseURL + '/bot-api/data/model/1/', {
        method: "POST",
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      });
      const response = await res.json();
      window.alert(response.message);
      window.alert(JSON.stringify(body));
    } catch (err) {
      console.error('提交请求出错：', err);
      window.alert('提交失败，请稍后重试');
    }
  }
  

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