用户单击

Question

我试图在用户单击列表时设置状态

当用户单击li标签之一时，我想循环更新li标签中的列表，我想更新某些状态，但反应会引发错误。

已超过最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时，可能会发生这种情况。 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 = {（e）=> {this.showCatDetail（e）}}

在onclick中尝试