Максимальная глубина обновления превышена при попытке установить состояние при нажатии пользователем

Question

Я пытаюсь, когда пользователь щелкает по списку, устанавливает состояние

У меня есть список в теге li в цикле, когда пользователь щелкает один из тегов li, я хочу обновить какое-то состояние, но реагирует на выбросы.

Превышена максимальная глубина обновления.Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate.React ограничивает количество вложенных

Вот мой основной кусок кода:

class Header extends React.Component{

constructor(props){
    super(props);
    this.showCatDetail=this.showCatDetail.bind(this);
    this.state={
        category:[],
        clk_category:[],
        detail:false
    }
}

componentDidMount() {
    fetch('http://127.0.0.1:8000/portfolio/create_category/')
        .then(response=>response.json())
        .then(categoryJson => this.setState({category: categoryJson},()=>{
            this.sortCategory()
        }))
}

showCatDetail=(e)=>{

    e.preventDefault();


    this.setState({detail:true,clk_category:JSON.parse(e.currentTarget.getAttribute('data-item'))},()=>{
        console.log(this.state.clk_category)
    });


};


sortCategory = ()=>{

    let sortArray=this.state.category;
    let swap;

    for (let i=0;i<sortArray.length;i++)
    {
        for (let j=0;j<sortArray.length;j++){

            if(sortArray[i].category_rank>sortArray[j].category_rank){
                swap=sortArray[i];
                sortArray[i]= sortArray[j];
                sortArray[j]=swap;
            }
        }

    }

    this.setState({category:sortArray})

};

render(){

    let hreflink=null;
    let redirect=null;

    if (this.state.detail){
        redirect=<Redirect to={`/category_project/${this.state.clk_category.id}`}/>
    }

    return(
        <div>
            {redirect}
            <header id="header">
                <div id="trueHeader">
                    <div className="wrapper">
                        <div className="container">
                            <div className="logo">
                                <a href={hreflink} id="logo">
                                </a>
                            </div>
                            <div className="menu_main">
                                <div className="navbar yamm navbar-default">
                                    <div className="container">
                                        <div className="navbar-header">
                                            <div className="visibledevice">
                                                <ul className="nav navbar-nav">
                                                    <li><a href={hreflink} className="active">
                                                        <i className="fa fa-home">
                                                        </i> Home</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div className="navbar-collapse collapse pull-right">
                                            <ul className="nav navbar-nav">
                                                <li><a href={hreflink} className="active">
                                                    <i className="fa fa-home">
                                                    </i> Contact Us</a></li>
                                                {this.state.category.map(cat=>{
                                                    return(
                                                        <li data-item={JSON.stringify(cat)} onClick={(e)=>this.showCatDetail(e)}><a href={hreflink} >
                                                            <i className="fa fa-home">
                                                            </i>{cat.category_name}</a></li>
                                                    )
                                                })}
                                            </ul>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
        </div>
    )
}

}

Я не могу понять, в чем проблема ...

Answer 1

OnClick = {(е) => {this.showCatDetail (е)}}

Попробуйте это в onclick