reactjs面包屑功能和太多渲染

Question

我正在尝试为我的 reactjs 项目构建一个面包屑组件，但我不断收到Too many re-renders 的错误。我的App.jsx 看起来像这样：

<div className="page-subheader">
    <Breadcrumbs />
</div>

Routes.jsx 看起来像这样：

export default [
    {
        name: 'Department1',
        abbrev: 'D1',
        icon: "fas fa-bullhorn",
        rootpath: '/dept1',
        paths: [
            {
                path: "/dept1",
                name: "Dashboard",
                Component: Dashboard,
                icon: "icon-Gaugage",
                showWelcome: true,
                crumbs: [
                    {name: 'Home', path: '/'},
                    {name: 'Department1', path: '/dept1'},
                ],
            },
            {
                path: "/dept1/mailroom",
                name: "Mailroom",
                Component: Mailroom,
                icon: "fas fa-envelope",
                showWelcome: false,
                crumbs: [
                    {name: 'Home', path: '/'},
                    {name: 'Department1', path: '/dept1'},
                    {name: 'Campaigns', path: '/dept1/mailoom'},
                ],
            },
            {
                path: "/dept1/people",
                name: "People",
                Component: People,
                icon: "fas fa-users",
                showWelcome: false,
                crumbs: [
                    {name: 'Home', path: '/'},
                    {name: 'Department1', path: '/dept1'},
                    {name: 'People', path: '/dept1/people'},
                ],
            },
            {
                path: "/dept1/tools",
                name: "Tools",
                Component: Tools,
                icon: "fas fa-chart-bar",
                showWelcome: true,
                crumbs: [
                    {name: 'Home', path: '/'},
                    {name: 'Department1', path: '/dept1'},
                    {name: 'Tools', path: '/dept1/tools'},
                ],
            }
        ],
    },
    {
        name: 'Department2',
        icon: "fas fa-building",
        abbrev: 'D2',
        rootpath: '/dept2',
        paths: [],
    },
    {
        name: 'Deaprtment3',
        icon: "fas fa-users-cog",
        abbrev: 'D3',
        rootpath: '/dept3',
        paths: [],
    }
];

那么Breadcrumbs.jsx 看起来像

import React, {useState} from "react";
import { NavLink } from "react-router-dom";
import { useLocation } from 'react-router-dom'
import Routes from "../Utilities/Routes";


const Breadcrumbs = (props) => {
    let location = useLocation();

    const [currentPath, setCurrentPath] = useState(location.pathname);
    
    // going to default to the comms root for now
    const [currentRouteObject, setCurrentRouteObject] = useState({
        path: "/dept1",
        name: "Dashboard",
        Component: Dashboard,
        icon: "icon-Gaugage",
        showWelcome: true,
        crumbs: [
            {name: 'Home', path: '/'},
            {name: 'Department1', path: '/dept1'},
        ],
    });

    Routes.map((route, key) => {
        if (currentPath.includes(route.rootpath)) {
            route.paths.map((routepath, routekey) => {
                if (currentPath.includes(routepath.path)) {
                    setCurrentRouteObject(routepath);
                    return true;
                }
            })
        }
    });

    return (
        <>
        <div className="container-fluid">
            <div className="row align-items-center">
                <div className="crumbs">
                    <nav aria-label="breadcrumb">
                        <ol className="breadcrumb">
                            <li className="breadcrumb-item"><NavLink to="/"><i className="icon-Home mr-2 fs14" /></NavLink></li>
                            {currentRouteObject.crumbs.map(({ name, path }, key) =>
                                key + 1 === currentRouteObject.crumbs.length ? (
                                        <li key={key} className="breadcrumb-item">{name}</li>
                                ) : (
                                    <li className="breadcrumb-item active"><NavLink key={key} to={path}>{name}</NavLink></li>
                                )
                            )}
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        </>
    );
};

export default Breadcrumbs;

我是新手，但这一切似乎都很简单——我不明白为什么它会一遍又一遍地重新渲染面包屑组件。

Answer 1

React 钩子是“普通”的 JS 函数（理解这一点很重要）。每次状态发生变化时，react 都会调用该函数。

问题：

面包屑组件是一个“反应钩子”。函数从上到下执行，setCurrentRouteObject(routepath)改变状态。因为状态改变了，又调用了Breadcrumbs，所以状态又改变了，所以又调用了Breadcrumbs，...

解决办法：

您应该使用useEffect() 根据其他状态更改状态。

useEffect( function(){
    // ...
    setCurrentRouteObject(/* ... */);
}, [ currentPath ] );

您在这里使用Routes 的方式似乎有问题，我不太明白会发生什么。您可能想看看.find() 方法。