我的父组件中有此代码:
<Route path='/champions/:id' render={(props) => <ChampionDetails {...props} match={this.handleMatch}/>}/>
其中匹配props将是一个从子组件(ChampionDetails)中检索数据的函数。我的 ChampionDetails(子)组件的片段:
import React, { Component } from 'react';
class ChampionDetails extends Component {
state = {
champId:this.props.match.params.id,
champData:null,
match:false
}
componentDidMount(){
console.log('ChampionDet mounted')
this.handleChampInfo();
console.log(this.props.match)
}
componentDidUpdate(){
console.log('ChampionDet updated')
}
handleChampInfo=()=>{
let champData = [];
let id = this.state.champId
console.log(id)
fetch('/api/getChampion?id='+id)
.then(data=> { return data.json() })
.then(json=> {
console.log(json.data);
champData.push(json.data);
this.setState({
champData:json.data,
match:true
})
this.props.match(true)
// this.props.history.push('/champions/'+id)
})
.catch(err=>{
console.log(err)
})
}
render(){
return(
<div>
<p>{this.state.champId}</p>
{this.state.champData===null ? null:<p>{this.state.champData.roles}</p>}
</div>
)
}
}
export default ChampionDetails;
这里的问题是,如果我在我父母的路线中有 match={},那么 this.props.match.params.id 将变为未定义。如果我删除 match={} 那么我可以检索 this.props.match.params.id
我想知道是否有可能在我的情况下仍然可以访问 this.props.match.params.id 的同时传递其他props。
任何帮助都感激不尽!