反应：无法在现有状态转换期间更新（例如在“呈现”中）。渲染方法应该是道具和状态的纯函数

Question

我想让活动的NavLink“子菜单键”处于React状态，告诉NavLink的onClick（）方法检查折叠中的任何NavLink是否处于活动状态，如果是，则不要切换isOpen进行折叠。

此代码使我在现有状态转换期间（例如在“render”内）无法更新。渲染方法应该是控制台中道具和状态错误的纯函数。

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时都在设置相同的值，因为itemIndex始终为1。

但是如上所述，在isActive中删除setState，错误就会消失

Answer 2

您得到这个错误是因为您的isActive函数。

我不太了解您正在使用的组件，NavLink，但我猜isActive道具是一个bool，当您获取isActive的值时，您就得到了这段代码

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

这会导致在渲染函数中更新状态。

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

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