Реквизиты, переданные дочернему компоненту, не определены, но console.log показывает значение реквизита - PullRequest
Новая
       47

Реквизиты, переданные дочернему компоненту, не определены, но console.log показывает значение реквизита

0 голосов
/ 22 марта 2020

Я пытаюсь создать Карусель в своем приложении на основе Гэтсби. У меня проблема с передачей реквизита из родительского в дочерний функциональный компонент. Я получаю сообщение об ошибке TypeError: props.slide не определен enter image description here, но когда я проверяю логи в консоли, то вижу, что props.slide имеет значение enter image description here

Меня интересует только 1-я строка в консоли (скриншот выше), на которой показаны пустые реквизиты, верно? Странно, что codesandbox не выдает никакой ошибки: https://codesandbox.io/s/ecstatic-snyder-9hjpf

Родительский компонент: 

//imports...

const carouselItems = [
  {
    title: "Laser scanning",
    picture: "../../../../assets/images/RTC360.png",
    content:
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad deserunt, enim est exercitationem facilis illum ipsum iure, mollitia placeat quia temporibus voluptatem. Asperiores assumenda id nesciunt totam. Eligendi, neque."
  },
  {
    title: "Mobile mapping",
    picture: "../../../../assets/images/RTC360.png",
    content:
      "Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad deserunt, enim est exercitationem facilis illum ipsum iure, mollitia placeat quia temporibus voluptatem. Asperiores assumenda id nesciunt totam. Eligendi, neque."
  }
];

interface CarouselState {
  activeIndex: number;
}

class Carousel extends React.Component<any, CarouselState> {
  constructor(props: any) {
    super(props);

    this.state = {
      activeIndex: 0
    };
  }

  render() {
    return (
      <div>
        <ul>
          {carouselItems.map((slideDescription, index) => (
            <CarouselDescriptionRCTypes
              key={index}
              index={index}
              activeIndex={this.state.activeIndex}
              slide={slideDescription}
            />
          ))}
        </ul>
      </div>
    );
  }
}

export default Carousel;

Дочерний компонент: 

//imports...

interface CarouselDescriptionProps {
  index: number;
  activeIndex: number;
  slide: {
    title: string;
    picture: string;
    content: string;
  };
}

const CarouselDescriptionRCTypes: React.FC<
  CarouselDescriptionProps
> = props => {

  if (!props) {
    return null;
  }

  console.log(`props${JSON.stringify(props)}`);
  console.log(`props.slide.title${props.slide.title}`);

  return (
    <div>
      <strong className="carousel-slide__author">{props.slide.title}</strong>
      <small className="carousel-slide__source">{props.slide.content}</small>
    </div>
  );
};

export default CarouselDescriptionRCTypes;

1 Ответ

0 голосов
/ 23 марта 2020

@ Шланг ответил на мой вопрос. Я проверял реквизиты в предложении IF с помощью 

 if (!props) {
    return null;
  }

, которые всегда возвращают true, потому что реквизиты всегда объектные и никогда не будут неопределенными. Я полагал, что проверка реквизита предотвратит возвращаемую неопределенную ошибку, которая является неправильной.

Как упомянул @Shlang, следует проверять каждое значение в реквизитах одним и тем же предложением, например: 

if (!props.slide) {
    return null;
  }

или используя, например, библиотеку Loda sh с ее функцией isEmpty.

...