React中Fetch API调用触发RangeError：栈溢出问题求助

你遇到的「Maximum Call Stack Size Exceeded」错误核心原因是无限递归调用：自定义的fetchURL函数内部错误地调用了自身，而非浏览器原生的fetch API，导致函数不断重复执行直到栈溢出。以下是具体修复方案和代码优化点：

核心修复步骤 #

• 停止递归调用：将await fetchURL("https://example.com", ...)改为await fetch("https://example.com", ...)，调用浏览器原生的请求API。
• 修正请求Body格式：你设置的Content-Type是application/x-www-form-urlencoded，但用了JSON.stringify处理参数，这会导致后端无法解析。需要用URLSearchParams来格式化表单数据。
• 修复变量拼写错误：setChartData中labels: result.map(...)里的result是笔误，应为results。
• 统一React DOM属性：React中元素类名要用className而非原生HTML的class。
• 修复组件标签语法错误：第二个<DoughnutChart>的闭合标签写错，应改为/>。
• 修正样式值拼写错误：backgroundColor中的rbga是笔误，应为rgba。

修复后的完整代码 #

const App = () => {
  const [dataArray, setDataArray] = useState([
    {"label": "Required configuration", "value": "N/A"}, 
    {"label": "Configuration", "value": 1}
  ]);
  const [chartData, setChartData] = useState({
    labels: ['Graph 1', 'Graph 2'],
    datasets: [
      {
        label: 'Plot',
        data: [50,50],
        backgroundColor: [
          'rgba(156,207,163)',
          'rgba(205,185,215)',
        ],
        borderWidth: 1,
        cutout: 60
      }
    ]
  });

  useEffect(() => {
    fetchURL();
  }, []);

  const fetchURL = async () => {
    try {
      const res = await fetch("https://example.com", {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          'Authorization': 'Basic ' + btoa('username:password')
        },
        body: new URLSearchParams({
          'search': 'query',
          'output_mode': 'json',
          'preview': false,
        })
      });

      if (!res.ok) throw new Error('请求失败');
      
      const data = await res.json();
      console.log(data.data);
      
      let results = data.data;
      setChartData({
        labels: results.map((item) => item.Total),
        datasets: [
          {
            data: results.map((item) => Number(item.Total)),
            backgroundColor: [
              'rgba(156,207,163)',
              'rgba(205,185,215)',
            ],
            borderWidth: 1,
            cutout: 60
          }
        ]
      });

      setDataArray(results.map((item) => ({
        "label": "Configuration", 
        "value": Number(item.Total)
      })));
    } catch (err) {
      console.error('数据获取失败:', err);
      // 可选：添加错误提示UI
    }
  };

  return (
    <div className="App">
      <div className="main">
        <div className="header">
          <p> My App </p>
        </div>
        <div className="content">
          <DoughnutChart chartData={chartData}/>
          <DoughnutChart chartData={chartData}/>
        </div>
        <div className="info">
          <div>
            <span>{dataArray[0].label}</span>
            <span>{dataArray[0].value}</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;

额外优化建议 #

• 添加try/catch捕获请求和数据处理过程中的错误，避免页面崩溃。
• 确认API返回的data.data结构是否符合预期，若返回数组长度与图表颜色数组不匹配，可能导致图表样式异常，可动态生成颜色数组适配数据长度。

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