axios GET 请求中超出 rangeerror 最大调用堆栈大小答案

【问题标题】：rangeerror maximum call stack size exceeded in axios GET requestaxios GET 请求中超出 rangeerror 最大调用堆栈大小
【发布时间】：2021-07-29 09:36:35
【问题描述】：

我有一个非常简单的组件，带有 axios 和 Material Table。来自 axios 请求的数据应该只加载一次并通过单击刷新按钮。

import React, { useState, useEffect } from 'react';
import { withStyles } from '@material-ui/core/styles';
import { FormattedMessage, injectIntl } from 'react-intl';
import { Typography, Paper } from '@material-ui/core';
import MaterialTable from 'material-table';
import axios from 'axios';
import { appConfig } from '../../../config';

import drawerStyle from '../../../styles/drawers';

const styles = (theme) => ({
  drawerPaper: drawerStyle(theme).drawerSmall,
});

const components = {
  Container: ({ children }) => {
    return <Paper elevation={0}>{children}</Paper>;
  }
};

const DemoRequests = (props) => {
  const { intl } = props;
  const [requests, setRequests] = useState([]);

  const url = `${appConfig.URL_REST}administration/demo_registration_request`;

  const config = {
    headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
  };

  const fetchRequests = () => {
    axios.get(url, config)
    .then((res) => {
      //setRequests(res.data.demoRequests);
      console.log(res);
    })
    //.catch(error => console.log(`Error: ${error}`));
  };

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

  return (
    <>
      <MaterialTable
        title={
          <Typography variant="h5" component="span">
            <FormattedMessage id="administration.demoRequests.table.title" />
          </Typography>
        }
        columns={[
          {
            title: <FormattedMessage id="administration.demoRequests.table.id" />,
            field: 'id',
          },
          {
            title: <FormattedMessage id="administration.demoRequests.table.company" />,
            field: 'company',
          },
          {
            title: <FormattedMessage id="administration.demoRequests.table.email" />,
            field: 'email',
          }
        ]}
        data={requests}
        //components={components}
        options={{
          padding: 'dense',
          searchFieldStyle: { margin: '40px' },
          rowStyle: { fontSize: '0.8125rem', padding: '0px' },
          cellStyle: {
            padding: '2px 16px 1px 16px',
            maxHeight: '36px',
          },
        }}
        actions={[
          {
            icon: 'refresh',
           tooltip: intl.formatMessage({ 
             id: 'administration.demoRequests.table.tooltip.refresh.data' 
           }),
            isFreeAction: true,
            onClick: () => fetchRequests(),
          }
        ]}
      />
    </>
  );
}
    
    export default injectIntl(
  withStyles(styles, { withTheme: true })(DemoRequests)
);

取消注释 setRequests(res.data.demoRequests) 会给我堆栈大小超出错误，但我在这里看不到错误。 onClick 正常工作，console.log 从请求中返回带有数据的对象。我在这里做错了什么？

编辑：尝试重新安装npm，将状态添加到useEffect依赖数组，获取useEffect内部的数据

【问题讨论】：

既然您提到onClick() 按预期工作，问题可能出在useEffect 上，因为它是调用fetchRequests() 的唯一其他函数。那么，您是否尝试将任何状态（如 requests）添加到 useEffect 依赖数组？
是的，我试过了，但没有结果。任何请求（fetch、axios、useCallback）都会给出相同的输出。

标签： reactjs axios

【解决方案1】：

解决方案是在 Chrome 浏览器上安装 React Developer Tools 扩展

【讨论】：