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

Question

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

Я должен указать ProjectList и Header, заголовок (заголовок веб-сайта) - это дочерний компонент родительского элемента, там есть ссылки на заголовок, если он нажимает на ссылку, я получаю идентификатор по этой ссылке, а затем передаю этот идентификатор через редирект.

но это дает мне ошибку, превышающую максимальное значение dept. Идентификатор, который я хочу передать из заголовка в список проектов, также поступает из другого состояния, которое не является дочерним для списка проектов.

Состояние ProjectList:

класс ProjectList расширяет React.Component {

constructor(props){
    super(props);
    this.showDetail=this.showDetail.bind(this);
    this.state={
        category_projects:[],
        projectPage:false,
        clk_project:null,
        category:[]
    }
}

componentDidMount() {
    fetch(`http://127.0.0.1:8000/portfolio/get_category_project/`+this.props.match.params.id+'/').then(response => response.json())
        .then(projectsJson => this.setState({category_projects: projectsJson},()=>{
            this.sortProjects()
        }))

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

}

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

};

showDetail=(evt)=>{

    evt.preventDefault();

    this.setState({projectPage:true});
    this.setState({clk_project:JSON.parse(evt.currentTarget.getAttribute('data-item'))});


};

sortProjects=()=>{

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

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

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

    }

    this.setState({category_projects:sortArray})

};

render() {

    let redirect=null;

    if (this.state.projectPage){
        redirect=<Redirect to={`/project/${this.state.clk_project.id}`}/>
    }
    return(
        <div>
            {redirect}
            <div className="site_wrapper">

                <div className="clearfix">
                </div>

                <Header category={this.state.category}/>

                <div className="clearfix">
                </div>

                <div className="page_title2">

                    <div className="container">
                        <div className="title"><h2>Projects</h2></div>
                    </div>
                </div>


                <div className="clearfix">
                </div>

                <div className="container">
                    <br />
                    {this.state.category_projects.map(proj=>{
                        return(
                            <div className="column">
                                <img data-item={JSON.stringify(proj)} onClick={this.showDetail} src={"http://127.0.0.1:8000"+proj.file} alt="Snow" className="ImgWidth"/>
                            </div>
                        )
                    })}
                </div>

                <div className="clearfix margin_top5">
                </div>

                <div className="footer_graph">
                </div>
                <Footer projects={this.state.category_projects} id={this.props.match.params.id}/>

            </div>
        </div>
    )
}

}

Состояние заголовка:

class Header extends React.Component{

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


showCatDetail=(e)=>{

    e.preventDefault();


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


};




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.props.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>
    )
}

}

this.props.match.params.id этот идентификатор, который я хочу получить из заголовка, так как пытаюсь передать его из заголовка. This.props.match.params.id в списке проектов может поступать из заголовка или другого состояния. Пожалуйста, предложите, как передать этот идентификатор из заголовка в список проектов, так как идентификатор может быть получен из другого состояния в проект.