javascript - React : Cannot update during an existing state transition (such as within `render` ). 渲染方法应该是 props 和 state 的纯函数

Question

我希望在 React 状态下拥有事件的 NavLink“子菜单键”，以告诉 NavLink 的 onClick() 方法检查 Collapse 中的任何 NavLink 是否处于事件状态，如果是，则不要切换 isOpen 进行 Collapse。

1。如果 Collapse 内的 NavLink 之一处于事件状态，我想停止折叠当前 Collapse

2。刷新网站后打开折叠就好了(当然，如果里面的某些导航链接处于事件状态)

这段代码给了我Cannot update during an existing state transition (such as within 'render'). Render methods should be a pure function of props and state控制台出错。

import React from 'react';
import { connect } from 'react-redux';
import { NavLink as Link } from 'react-router-dom';
import { Nav, NavItem, NavLink, Collapse } from 'reactstrap';
import { bindActionCreators } from 'redux';
import { actions } from './../../containers/Account/store';
import classnames from 'classnames';

class NavMenuAside extends React.Component {
    constructor(props) {
        super(props);

        this.state = { collapsed: {} };
    }

    toggle(itemIndex) {
        const { collapsed, active } = this.state

        // Don't collapse if some NavLinks inside is active
        // but allow to toggle() if is collapsed (if we refresh site)
        if (active === itemIndex && collapsed[itemIndex]) {
            return
        }

        this.setState({
            collapsed: {
                    ...collapsed,
                    [itemIndex]: !collapsed[itemIndex]
                }
            });
    }

    isActive = (itemIndex) => (match) => {
        const { active } = this.state

        if (match) {
            if (active !== itemIndex) {
                this.setState({
                    active: itemIndex
                })
            }
        }

        return !!match;
}

    render() {
        const { t } = this.props;

        return (
            <Nav className="nav--aside">
                <NavItem>
                    <NavLink tag={Link} to="/admin/qqqq/ffff">{icon('envelope-colored', 'aside-svg')} {t('navMenu.alerts')}</NavLink>
                </NavItem>
                <NavItem>
                    <NavLink onClick={() => this.toggle(1)} className={classnames({ 'open': this.state.collapsed[1] })}>{icon('analytics', 'aside-svg')} {t('navMenu.terefere')}</NavLink>
                    <Collapse isOpen={this.state.collapsed[1]}>
                        <NavLink tag={Link} isActive={this.isActive(1)} to="/admin/wfwfwfwfwwf">{t('navMenu.terefere2')}</NavLink>
                        <NavLink tag={Link} isActive={this.isActive(1)} to="/admin/qdqdqd">{t('navMenu.terefere2')}</NavLink>
                        <NavLink tag={Link} isActive={this.isActive(1)} to="/admin/qqqqq">{t('navMenu.terefere2')}</NavLink>
                        <NavLink tag={Link} isActive={this.isActive(1)} to="/admin/wfwwfwf">{t('navMenu.terefere2')}</NavLink>
                    </Collapse>
                </NavItem>
            </Nav>
        );
    }
}

Answer 1

由于您的 isActive 函数，您收到该错误。

我对您正在使用的组件 NavLink 不太了解，但我猜测 isActive 属性是 bool，当您获取 isActive 的值时，您将看到这段代码

if (match) {
    if (active !== itemIndex) {
        this.setState({
            active: itemIndex
        })
    }
 }

这会导致渲染函数内的状态更新。

您需要找到一种方法在渲染之前计算出这些值，将 setState 逻辑移出该函数并在其他地方执行。通常，我会使用 componentDidUpdate 来查找状态/属性的更改并在那里调用 setState 。

如果您对此有任何疑问或需要澄清，请告诉我。