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

Question

我想在 React 状态下激活 NavLink“子菜单键”，以告知 NavLink 的 onClick() 方法检查 Collapse 中是否有任何 NavLink 处于活动状态，如果是，则不要为 Collapse 切换 isOpen。

1。如果 Collapse 中的 NavLink 之一处于活动状态，我想停止折叠当前 Collapse

2。刷新站点后打开折叠会很好（当然，如果内部的某些 NavLink 处于活动状态）

此代码在控制台中出现 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 来查找 state/props 的变化并在那里调用 setState。

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

Answer 2

我不知道你想要达到什么目的，但对我来说，你每次调用 isActive 时都会设置相同的值，因为 itemIndex 总是 1。

但正如上面的回答，删除 isActive 中的 setState 错误将消失

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

React: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state

javascript

reactjs

react-router

react-redux

reactstrap

1。如果 Collapse 中的 NavLink 之一处于活动状态，我想停止折叠当前 Collapse

2。刷新站点后打开折叠会很好（当然，如果内部的某些 NavLink 处于活动状态）