尝试根据 useState 值有条件地呈现内容时超出最大更新深度

Question

我正在尝试根据 link 在“抽屉”中单击的内容有条件地呈现页面上的内容。但是每当我尝试渲染内容时，它都会给出超出最大更新的错误。

当我添加标签时，它发生在 Sidebar.js 中，但我不确定它是如何导致的。

这是我的代码：

// App.js 路线

...
<Route path="/dashboard" element={<DashboardContents />}>
    <Route path="/dashboard/home" element={<Activity/>}/>
    <Route path="/dashboard/create" element={<CreateInvoice/>} />
    <Route path="/dashboard/list" element={<MyInvoices/>} />
</Route>
...

// Sidebar.js

...

function Sidebar(props) {
    const [activeLink, changeLinkState] = useState({
        activeItem: { icon: <HomeIcon />, text: "Home" },
        objects: [
            { icon: <HomeIcon />, text: "Home" },
            { icon: <NoteAddIcon />, text: "Create Invoice" },
            { icon: <InboxIcon />, text: "My Invoices" },
        ],
    });

    return (
        <React.Fragment>
            <Drawer
                sx={{
                    width: drawerWidth,
                    flexShrink: 0,
                    "& .MuiDrawer-paper": {
                        width: drawerWidth,
                        boxSizing: "border-box",
                    },
                }}
                variant="persistent"
                anchor="left"
                open={props.sideBarState}
            >
                <DrawerHeader>
                    <IconButton onClick={props.onChange}>
                        <ChevronLeftIcon />
                    </IconButton>
                </DrawerHeader>
                <Divider />
                <DrawerList activeLink={activeLink} changeLinkState={changeLinkState} />
            </Drawer>

            <Main open={props.sideBarState}>
                <DrawerHeader />
                {/* <Navigate to="/dashboard/create" /> */}
                {activeLink.activeItem.text == "Home" && <Navigate to="/dashboard/home" />}
                {activeLink.activeItem.text == "Create Invoice" && <Navigate to="/dashboard/create" />}
                {activeLink.activeItem.text == "My Invoices" && <Navigate to="/dashboard/list" />}
            </Main>
        </React.Fragment>
    );
}

export default Sidebar;

// 抽屉列表

...

export default function DrawerList(props) {
    const activeLink = props.activeLink;
    const changeLinkState = props.changeLinkState;

    function handleLinkChange(index) {
        changeLinkState({ ...activeLink, activeItem: activeLink.objects[index] });
    }

    function toggleStyles(type, index) {
        if (type === "icon") {
            if (activeLink.objects[index] == activeLink.activeItem) {
                return activeIcon;
            } else {
                return linkContent;
            }
        } else if (type === "text") {
            if (activeLink.objects[index] == activeLink.activeItem) {
                return activeText;
            } else {
                return linkContent;
            }
        } else if (type === "background") {
            if (activeLink.objects[index] == activeLink.activeItem) {
                return { padding: 3, ...activeHighlight };
            } else {
                return { padding: 3 };
            }
        }
    }

    return (
        <React.Fragment>
            <List>
                {activeLink.objects.map((element, index) => (
                    <React.Fragment>
                        <div key={index} onClick={() => handleLinkChange(index)}>
                            <ListItem sx={toggleStyles("background", index)} button>
                                <ListItemIcon sx={toggleStyles("icon", index)}>{element.icon}</ListItemIcon>
                                <ListItemText primary={element.text} sx={toggleStyles("text", index)} />
                            </ListItem>
                        </div>
                        {index === 0 && <Divider />}
                    </React.Fragment>
                ))}
            </List>
        </React.Fragment>
    );
}

Answer 1

已解决 - 使用链接而不是导航

Answer 2

Navigate 组件在呈现时会立即发出声明性导航。您可能想要使用的是 Link 组件。这是呈现锚标记并处理导航到应用程序中其他页面的组件在被点击后，而不是在它们被呈现时。

<Main open={props.sideBarState}>
  <DrawerHeader />
  {activeLink.activeItem.text === "Home" && (
    <Link to="/dashboard/home">
      {activeLink.activeItem.text}
    </Link>
  )}
  {activeLink.activeItem.text === "Create Invoice" && (
    <Link to="/dashboard/create">
      {activeLink.activeItem.text}
    </Link
  }
  {activeLink.activeItem.text === "My Invoices" && (
    <Link to="/dashboard/list">
      {activeLink.activeItem.text}
    </Link>
  }
</Main>

尝试根据 useState 值有条件地呈现内容时超出最大更新深度

Maximum update depth exceeded when trying to conditionally render content based on useState value

reactjs

react-router