Получение undefined не является объектом (оценка 'props.navigation.addListener') - PullRequest
Новая
       19

Получение undefined не является объектом (оценка 'props.navigation.addListener')

0 голосов
/ 22 апреля 2019

Я пытаюсь реализовать HOC для Backhandler.У меня есть 3 компонента, все они завернуты в createBottomTabNavigator, дом является одним из них.но до реализации backhandling, HOC показывает эту ошибку.enter image description here

Компонент home- 

import React, { Component } from 'react';
import {Text,View} from 'react-native';
import updateComponent from './HOC/updateComponent';
class home extends Component {
constructor(props) {
    super(props);
}
 render() {
  return (
     <View><Text> HOC</Text></View>
    );
  }
}
export default updateComponent(home);

HOC updateComponent 

import React, { Component } from 'react';
const updateComponent = WrappedComponent => {
  class NewComponent extends Component {
    constructor(props) {
      super(props);
    }
    render() {

      return <WrappedComponent />;
    }
  }
  return NewComponent;
};
export default updateComponent;

1 Ответ

0 голосов
/ 27 апреля 2019

Ваш home компонент должен начинаться с заглавной буквы, начиная с React docs :

Когда тип элемента начинается со строчной буквы, он ссылается на встроенный компонент, напримерили и приводит к строке 'div' или 'span', переданной в React.createElement.Типы, которые начинаются с заглавной буквы, такие как compile to React.createElement (Foo) и соответствуют компоненту, определенному или импортированному в вашем файле JavaScript.

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

Другая вещь (не уверен, что вызовет ошибку, но позже у вас будут ошибки)) означает, что вы не передаете реквизиты NewComponent, что означает, что каждый раз, когда вы оборачиваете компонент с помощью updateComponent, вы теряете все реквизиты.

Решение:

  1. home -> Home.
  2. return <WrappedComponent /> -> return <WrappedComponent {...this.props} />.
...