React:无法在现有状态转换期间更新(例如在 `render` 内).Render 方法应该是 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

问题描述

我想要激活 NavLink子菜单键"在 React 状态下告诉 NavLink 的 onClick() 方法检查折叠中的任何导航链接是否处于活动状态，如果是，不要切换 isOpen 以进行折叠.

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.

这段代码给了我 无法在现有状态转换期间更新(例如在渲染"中).Render 方法应该是一个纯粹的 props 函数和 state 控制台中的错误.

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

推荐答案

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

You are getting that error because of your isActive function.

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

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.

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

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.

这篇关于React:无法在现有状态转换期间更新(例如在 `render` 内).Render 方法应该是 props 和 state 的纯函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！