javascript - React-router-dom NavLink 图标更新程序 "Maximum update depth exceeded."

Question

我们正在开发一个使用 React.js 的项目。我正在使用react-router-dom配置多个页面，并且我想使用NavLink更改当前事件的图标。

icon+sel 用于事件页面。

我根据之前问题的答案重写了代码。 SetState也是从render出来的，其他设置我也稍微碰了一下。

错误.... error

控制台... console-1 console-2

import React from 'react';
import { Link, NavLink, Router } from 'react-router-dom';
import ReactDOM from 'react-dom';
import home from './home.svg';
import homesel from './homesel.svg';
import search from './search.svg';
import searchsel from './searchsel.svg';
import setting from './setting.svg';
import settingsel from './settingsel.svg';
import add from './add.svg';
import addsel from './addsel.svg';
import account from './account.svg';
import accountsel from './accountsel.svg';


import './Bottom.css';



class Bottom extends React.Component {
  state = {
    iconName : 'initialIconName'
  }

  setIconName = (name) => {
    this.setState(() => ({
      iconName: name
    }))
  }

  oddEvent = (match, location) => {
  if (!match) return false
  console.log(location.pathname.substr(1).split('/')[0])
  this.setState(() => ({
    iconName: location.pathname.substr(1).split('/')[0]
  }))
  }

    render() {
      return (
          <fragment>
            <div className="bottom noright">
              <div className="bottomcontents">
                <div className="bottomicon">
                    <NavLink className="bottomiconinside bottomiconinsideside" src={home} exact to="/" isActive={this.oddEvent}>
                    <img className="iconcenter" src={require(`./home${this.state.iconName == 'home' ? 'sel' : ''}.svg`)}/>
                    </NavLink>
                    <NavLink className="bottomiconinside bottomiconinsideside" exact to="/search" isActive={this.oddEvent}>
                    <img className="iconcenter" src={require(`./search${this.state.iconName == 'search' ? 'sel' : ''}.svg`)}/>
                    </NavLink>
                    <NavLink className="bottomiconinside bottomiconinsideside" to="/add" isActive={this.oddEvent} >
                    <img className="iconcenter" src={require(`./add${this.state.iconName == 'add' ? 'sel' : ''}.svg`)}/>
                    </NavLink>
                    <NavLink className="bottomiconinside bottomiconinsideside" to="/account" isActive={this.oddEvent}>
                    <img className="iconcenter" src={require(`./account${this.state.iconName == 'account' ? 'sel' : ''}.svg`)}/>
                    </NavLink>
                    <NavLink className="bottomiconinside bottomiconinsideside" exact to="/setting" isActive={this.oddEvent}>
                    <img className="iconcenter" src={require(`./setting${this.state.iconName == 'setting' ? 'sel' : ''}.svg`)}/>
                    </NavLink>
                </div>
              </div>
            </div>
              </fragment>
        );
    }

  }

export default Bottom;

Answer 1

您正在从 oddEvent 内部调用 setState() (屏幕截图显示了这一点)。你不能从 render() 中做到这一点，它会导致重新渲染，它会调用 oddEvent，它会调用 setState()，这会导致重新渲染，如此循环下去。

您将不得不重新考虑您的设计。