传递给子组件的道具未定义，但 console.log 显示道具的值

Posted 2023-02-23

【中文标题】传递给子组件的道具未定义，但 console.log 显示道具的值

【英文标题】：Props passed to child component is undefined but console.log shows props' value

【发布时间】：2020-07-03 06:57:18

【问题描述】：

我尝试在基于 Gatsby 的应用中创建轮播。我在将道具从父功能组件传递给子功能组件时遇到问题。我收到错误 TypeError: props.slide is undefined 但是当我在控制台中检查日志时，我可以看到 props.slide 有价值

我只是想知道控制台的第一行（上面的屏幕截图）显示了空道具，对吧？ 奇怪的是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;

【问题讨论】：

日志的第一行将 props 显示为空数组，我猜那是您遇到错误的时候。查看代码，我看不出有任何理由让它为空。您的示例与您遇到问题的代码完全相同吗？

它工作正常，您将不带道具的<CarouselDescriptionRCTypes /> 添加到您的IndexPage，这样您就会得到错误，并且您的保护子句if(!props) 不起作用，因为道具始终是一个对象，所以你需要单独检查每个道具或使用类似 lodash _.isEmpty 或 !Object.keys(props).lenght

谢谢@Shlang！这样可行！这对我来说很有意义！ :)

【参考方案1】：

@Shlang 回答了我的问题。 我一直在通过

检查 IF 子句中的道具

 if (!props) 
    return null;
  

总是返回 true 因为 props 总是对象并且永远不会是未定义的。我相信检查道具可以防止返回未定义的错误。

正如@Shlang 提到的，应该通过相同的子句检查 props 中的每个值，例如：

if (!props.slide) 
    return null;
  

，或使用例如Lodash 库及其 isEmpty 函数。