嗨,我在将道具传递给子组件时遇到一些问题。 问题是,将全局状态作为道具发送到子组件正常工作,但是我无法将局部道具发送到子组件。
我不知道为什么,但是它返回未定义。
const mapStateToProps =(state)=>{
return state.itemInfo
}
export class ItemInformationContainer extends React.Component{
componentWillUnmount(){
store.dispatch(hideItemInfo());
}
handleBackToList = (e)=>{
console.log('back please');
store.dispatch(hideItemInfo());
}
render(){
return(
<WrappedItemComponent backToList={this.handleBackToList} {...this.props}/>
)
}
}
export const ItemInformation =(props)=>{
console.log(props);
return(/*some codes*/
)
}
const WrappedItemComponent = connect(mapStateToProps)(ItemInformation);
在ItemInformation组件中,我使用console.log(props)检查表示性组件是否正在从父组件获取backToList道具。
但结果是
{backToList:未定义,内容:{…},键入:“ country”,状态:“ show”,调度:ƒ} backToList:未定义
backToList未定义。
我真的需要这个道具。我如何解决它?
请忽略componentWillUnmount。如果handleBackToList将正常工作,则该生命周期方法将从代码中删除。
答案 0 :(得分:0)
嗯,这是我愚蠢而愚蠢的错误。
该错误是由于祖父母组件将相同的道具传递给父组件而引起的。
所以代码的结构是这样的:
国家/地区组件-> ItemInformationContainer组件-> ItemInformation组件
我很愚蠢,并且在“国家/地区”部分做了这样的事情
return(
<section id="ItemResult">
<ItemInformationContainer backToList={this.backToList} content={this.state.content}/>
</section>
)
将backToList道具传递给子组件,而Countrys组件中没有backToList函数 当然,据我所知,backToList是未定义的,ItemInformationContainer也将是未定义的。
因此,我刚刚删除了Countrys组件中的backToList道具,并且工作正常。