如何处理路由逻辑以防止 componentDidUpdate 中的无限循环？

Question

我正在创建一个具有多个选项的 header，具体选项将具有 class 'active'，具体取决于 url 路径名（例如 'plant/tree'） .为此，我设置了组件 HeaderOptions 并在状态下将所有选项的布尔值初始化为 false（没有选项在索引上处于活动状态）。我实现的逻辑在导航到特定路径名时有效，但在返回索引时它给了我一个无限循环——我想不出解决这个问题的方法。

const Header = (props) => {
    const {
        location,
        history,
    } = props;

    return (
        <div className="Header">
            <div className="grid-row">
                <HeaderOptions location={location} history={history} />
            </div>
        </div>
    );
};

const HeaderWithRouter = withRouter(Header);

class HeaderOptions extends React.Component {
    state = {
        treeOption: false,
        prairieOption: false,
        reportOption: false,
    };

    componentDidUpdate() {
        const {
            treeOption,
            prairieOption,
            reportOption,
        } = this.state;

        const {
            location: {
                pathname,
            },
        } = this.props;

        if (pathname.includes('/plant/tree') && !treeOption) {
            this.setOptionState('treeOption');
        } else if (pathname.includes('/plant/prairie') && !prairieOption) {
            this.setOptionState('prairieOption');
        } else if (pathname.includes('/report') && !reportOption) {
            this.setOptionState('reportOption');
        } else if (pathname === '/') {
            this.setOptionState(null);
        }

    }

    setOptionState(optionName) {
        const updateState = {
            treeOption: false,
            prairieOption: false,
            reportOption: false,
        };

        if (optionName) {
            updateState[optionName] = true;
        }

        this.setState(updateState);
    }
...

Answer 1

 componentDidUpdate(pathname: string) {
     .....
   } else if (pathname === "/" && (treeOption || prairieOption || reportOption)) {
    this.setOptionState(null);
   }
  }

如何处理路由逻辑以防止 componentDidUpdate 中的无限循环？

How to handle routing logic to prevent infinite loop in componentDidUpdate?

setstate

reactjs

react-router-dom