我在从特定组件到另一个组件的反应中更改路线时遇到问题。这是我的路线。我在'/'到'/ login'之间切换没有任何问题，反之亦然。但是，当活动路由为“ / menu-management”时，单击“链接”会导致错误。这是我的路线。
function Routes() {
return (
<Switch>
<Route exact path='/menu-management' render={()=> <Layout toolbar={true} navbar={true} children={<MenuManagement/>}/>} />
<Route exact path='/login' render={()=> <Layout toolbar={false} navbar={false} children={<Login />}/>} />
<Route exact path='/' render={()=> <Layout toolbar={true} navbar={true} children={<Definitions/>}/>}/>
</Switch>
);}
这是导致错误的组件
import React from 'react';
import PropTypes from 'prop-types';
import SvgIcon from '@material-ui/core/SvgIcon';
import {fade, makeStyles, withStyles} from '@material-ui/core/styles';
import TreeView from '@material-ui/lab/TreeView';
import TreeItem from '@material-ui/lab/TreeItem';
import Collapse from '@material-ui/core/Collapse';
import {useSpring, animated} from 'react-spring/web.cjs';
import gql from "graphql-tag";
import {useQuery} from "@apollo/react-hooks";
import * as Actions from '../store/actions/index';
import {useDispatch} from "react-redux";
function MinusSquare(props) {
return (
<SvgIcon fontSize="inherit" style={{width: 14, height: 14}} {...props}>
{/* tslint:disable-next-line: max-line-length */}
<path
d="M22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0zM17.873 11.023h-11.826q-.375 0-.669.281t-.294.682v0q0 .401.294 .682t.669.281h11.826q.375 0 .669-.281t.294-.682v0q0-.401-.294-.682t-.669-.281z"/>
</SvgIcon>
);
}
function PlusSquare(props) {
return (
<SvgIcon fontSize="inherit" style={{width: 14, height: 14}} {...props}>
{/* tslint:disable-next-line: max-line-length */}
<path
d="M22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0zM17.873 12.977h-4.923v4.896q0 .401-.281.682t-.682.281v0q-.375 0-.669-.281t-.294-.682v-4.896h-4.923q-.401 0-.682-.294t-.281-.669v0q0-.401.281-.682t.682-.281h4.923v-4.896q0-.401.294-.682t.669-.281v0q.401 0 .682.281t.281.682v4.896h4.923q.401 0 .682.281t.281.682v0q0 .375-.281.669t-.682.294z"/>
</SvgIcon>
);
}
function CloseSquare(props) {
return (
<SvgIcon className="close" fontSize="inherit" style={{width: 14, height: 14}} {...props}>
{/* tslint:disable-next-line: max-line-length */}
<path
d="M17.485 17.512q-.281.281-.682.281t-.696-.268l-4.12-4.147-4.12 4.147q-.294.268-.696.268t-.682-.281-.281-.682.294-.669l4.12-4.147-4.12-4.147q-.294-.268-.294-.669t.281-.682.682-.281.696 .268l4.12 4.147 4.12-4.147q.294-.268.696-.268t.682.281 .281.669-.294.682l-4.12 4.147 4.12 4.147q.294.268 .294.669t-.281.682zM22.047 22.074v0 0-20.147 0h-20.12v0 20.147 0h20.12zM22.047 24h-20.12q-.803 0-1.365-.562t-.562-1.365v-20.147q0-.776.562-1.351t1.365-.575h20.147q.776 0 1.351.575t.575 1.351v20.147q0 .803-.575 1.365t-1.378.562v0z"/>
</SvgIcon>
);
}
function TransitionComponent(props) {
const style = useSpring({
from: {opacity: 0, transform: 'translate3d(20px,0,0)'},
to: {opacity: props.in ? 1 : 0, transform: `translate3d(${props.in ? 0 : 20}px,0,0)`},
});
return (
<animated.div style={style}>
<Collapse {...props} />
</animated.div>
);
}
TransitionComponent.propTypes = {
/**
* Show the component; triggers the enter or exit states
*/
in: PropTypes.bool,
};
const StyledTreeItem = withStyles((theme) => ({
iconContainer: {
'& .close': {
opacity: 0.3,
},
},
group: {
marginLeft: 7,
paddingLeft: 18,
borderLeft: `1px dashed ${fade(theme.palette.text.primary, 0.4)}`,
},
}))((props) => <TreeItem {...props} TransitionComponent={TransitionComponent}/>);
const useStyles = makeStyles({
root: {
height: 264,
flexGrow: 1,
maxWidth: 400,
},
});
const GET_PRODUCT_GROUPS = gql`
query getProductGroups($account:Int!){
product_groups(group_account: $account, sort:1) {
id
product_group_main {
id
main_group_name
account_group_name{
except_g_data
}
}
products {
id
product_name
account_product_name{except_p_data}
product_detail{
detail_text
}
product_price{
price_value
price_takeaway
price_eatin
}
account_product_price{
except_c_value
except_c_takeaway
except_c_eatin
}
}
}
}`;
export default function ControlledTreeView() {
const account = sessionStorage.getItem('account');
const classes = useStyles();
const dispatch = useDispatch();
const renderTree = (productGroups) => (
Array.isArray(productGroups) ? productGroups.map((productGroup) => (
<StyledTreeItem key={productGroup.id} nodeId={`${productGroup.id}`}
label={productGroup.product_group_main.main_group_name}>
{Array.isArray(productGroup.products) ? productGroup.products.map((product) => (
<StyledTreeItem key={product.id} nodeId={`${product.id}`} label={product.product_name}
onClick={() => dispatch(Actions.setProductId(product.id))}/>
)) : null}
</StyledTreeItem>
)) : null
);
const {data, loading, error} = useQuery(GET_PRODUCT_GROUPS, {variables: {account: parseInt(account)}});
if (loading) return <p>Loading...</p>;
if (error) return <p>Error</p>;
console.log(data);
return (
Array.isArray(data.product_groups) &&
<TreeView
className={classes.root}
defaultExpanded={['1']}
defaultCollapseIcon={<MinusSquare/>}
defaultExpandIcon={<PlusSquare/>}
defaultEndIcon={<CloseSquare/>}
>
{renderTree(data.product_groups)}
</TreeView>
);
}
错误是
TreeView.js:496 Uncaught RangeError: Maximum call stack size exceeded
The above error occurred in the <ForwardRef(TreeItem)> component:
in ForwardRef(TreeItem) (created by WithStyles(ForwardRef(TreeItem)))
in WithStyles(ForwardRef(TreeItem)) (at ControlledTreeView.js:75)
in Unknown (created by WithStyles(Component))
in WithStyles(Component) (at ControlledTreeView.js:123)
in ul (created by ForwardRef(TreeView))
in ForwardRef(TreeView) (created by WithStyles(ForwardRef(TreeView)))
in WithStyles(ForwardRef(TreeView)) (at ControlledTreeView.js:140)
in ControlledTreeView (at MenuManagement.js:19)
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (at MenuManagement.js:18)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at MenuManagement.js:17)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at MenuManagement.js:15)
in MenuManagement (at routes.js:11)
in main (at Layout.js:47)
in div (at Layout.js:44)
in App (created by Context.Consumer)
in withRouter(App) (at routes.js:11)
in Route (at routes.js:13)
in Switch (at routes.js:10)
in Routes (at App.js:35)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:34)
in Provider (at App.js:33)
in Suspense (at App.js:32)
in App (at src/index.js:22)
in ApolloProvider (at src/index.js:21)
Consider adding an error boundary to your tree to customize error handling behavior.
答案 0 :(得分：1)
面对并解决了这个问题。检查 TreeItem 中是否提供了重复的 nodeId？