response-redux) mapStateToProps работает, но отправка локального (?) реквизита дочернему компоненту возвращает undefined.

Question

Привет, у меня возникли проблемы с передачей реквизита дочернему компоненту.Проблема в том, что отправка глобального состояния как реквизитов дочернему компоненту работает правильно, но я не могу отправить локальный реквизит дочернему компоненту.

Я не знаю почему, но он возвращает неопределенное значение.

    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: undefined, content: {…}, Тип: «страна», статус: «шоу», отправка: back} backToList: undefined

backToList не определен.

Мне действительно нужны эти реквизиты.Как мне это исправить?

пожалуйста, игнорируйте componentWillUnmount.Если handleBackToList будет работать правильно, этот метод жизненного цикла будет удален из кода.

Answer 1

Что ж, это была моя глупая и глупая ошибка.

Ошибка возникла из-за того, что родительский компонент передал те же реквизиты родительскому компоненту.

Итак, структура кода такова:

Компонент стран -> компонент ItemInformationContainer -> компонент ItemInformation

Я был глуп и делал такие вещи в компоненте стран

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

передал реквизиты backToList дочернему компоненту, и не было функции backToList в компоненте «Страны». Конечно, backToList не определен, а ItemInformationContainer также становится неопределенным, как я понял.

Итак, я только что удалил реквизиты backToList в компоненте Страны и работает нормально.