react-router-dom NavLink 图标更新程序“已超出最大更新深度。”

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

icon+sel 用于活动页面。

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

错误……错误

控制台 ...控制台 1 控制台 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;