我正在尝试使用将数据从子状态传递到父状态
我必须声明ProjectList和Header，标题（网站标题）状态是父级的子组件，标题上有链接，如果它单击链接，那么我通过该链接获取一个ID，然后将该ID传递给通过重定向。
但它给了我超出最大部门的错误。我想从标题传递到项目列表的 id 也来自不是项目列表子项的其他状态。
项目列表状态：
类 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 这个 id 我想从 header 中获取，因为我试图从 header 中传递。项目列表中的 this.props.match.params.id 可以来自 Header 或其他状态。请需要建议如何将此 id 从标题传递到项目列表以及 id 可以来自其他状态到项目。