react-router-dom NavLink图标更新器“已超过最大更新深度。”

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()中无法做到这一点，render()会导致重新渲染，而render()会调用oddEvent，而render()会调用setState()，从而导致重新渲染。

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