react-redux)mapStateToProps可以工作,但是将local(?)道具发送到子组件会返回未定义的。

时间:2018-10-03 12:35:29

标签: reactjs react-redux

嗨,我在将道具传递给子组件时遇到一些问题。 问题是,将全局状态作为道具发送到子组件正常工作,但是我无法将局部道具发送到子组件。

我不知道为什么,但是它返回未定义。

    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将正常工作,则该生命周期方法将从代码中删除。

1 个答案:

答案 0 :(得分:0)

嗯,这是我愚蠢而愚蠢的错误。

该错误是由于祖父母组件将相同的道具传递给父组件而引起的。

所以代码的结构是这样的:

国家/地区组件-> ItemInformationContainer组件-> ItemInformation组件

我很愚蠢,并且在“国家/地区”部分做了这样的事情

return(
      <section id="ItemResult">
            <ItemInformationContainer backToList={this.backToList} content={this.state.content}/>
                    </section>
      )

将backToList道具传递给子组件,而Countrys组件中没有backToList函数 当然,据我所知,backToList是未定义的,ItemInformationContainer也将是未定义的。

因此,我刚刚删除了Countrys组件中的backToList道具,并且工作正常。