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

Question

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

icon + sel用于活动页面。

我已经根据先前问题的答案重写了代码。SetState也退出了渲染，我稍微触摸了其他设置。

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`)}/>

    }

  }

Answer 1

您正在从oddEvent内部调用setState（）（屏幕截图显示了它）。您不能通过render（）来执行此操作，这会导致重新渲染，然后调用oddEvent，后者会调用setState（），后者导致重新渲染，并且不停地进行。您将不得不重新考虑您的设计。