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

问题

I want to have active NavLink "submenu key" in React state to tell NavLink's onClick() method to check if any of NavLinks in Collapse is active and if so, don't toggle isOpen for Collapse.

1. I want to stop collapsing current Collapse if one of NavLink inside Collapse is active

2. Would be nice to have opened Collapse after refreshing site (of course if some NavLink inside is Active)

This code gives me Cannot update during an existing state transition (such as within 'render'). Render methods should be a pure function of props and state error in console.

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>
        );
    }
}

回答1:

You are getting that error because of your isActive function.

I dont know a lot about the component you are using, NavLink, but I'm guessing the isActive prop is a bool, and while you are fetching the value for isActive you are getting to this piece of code

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

which is causing an update to state inside your render function.

You need to find a way to figure out those values before the render, move the setState logic out of that function and perform it somewhere else. Usually, I will use componentDidUpdate to look for changes in state/props and call setState there.

Let me know if you have any questions on this or need clarification.

回答2:

I don't know what you are trying to achieve, but to me, you are setting the same values to state every time you call isActive since itemIndex is always 1.

But as answered above, remove setState in isActive and the error will go away

来源：https://stackoverflow.com/questions/57079814/react-cannot-update-during-an-existing-state-transition-such-as-within-render

标签

javascript

reactjs

react-redux

react-router

reactstrap