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

Question

我正在创建一个带有多个选项的标题，具体选项将根据 url 路径名（例如“植物/树”）具有“活动”类。为此，我设置了组件 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);
    }
...

标签： reactjsreact-router-domsetstate

Answer 1

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