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

Question

我有非常简单的组件与axios和材料表。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)
);

取消注释设置请求（res.data.demo请求）给我堆栈大小超过了错误，但我在这里看不到错误。我到底做错了什么？

编辑：尝试重新安装npm，将状态添加到useffectdependency数组，获取useffect

Answer 1

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