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

Posted 2023-03-23

【中文标题】React：在现有状态转换期间无法更新（例如在 `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

【发布时间】：2019-11-26 12:30:59

【问题描述】：

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

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

2。刷新站点后打开 Collapse 就好了（当然，如果里面的某些 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>
        );
    

【参考方案1】：

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

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

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

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

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

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

【参考方案2】：

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

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