react js中如何知道组件渲染情况

Posted 2023-02-23

【中文标题】react js中如何知道组件渲染情况

【英文标题】：how to know the component rendering condition in react js

【发布时间】：2020-08-31 04:28:25

【问题描述】：

我有一个组件也呈现为子组件，或者用户可以直接从 UI 菜单导航到该组件。我现在面临的一个问题是，如果该组件作为子组件，那么它工作正常，但是当我单击菜单直接导航时，我的 getDerivedStateFromProps() 函数会抛出错误，因为

TypeError: 无法读取未定义的属性“长度”

下面是我的代码。如果我将数据从父组件发送到该组件并从父组件呈现它，它将正常工作。

static getDerivedStateFromProps(props, state) 
    if (props.data.length)// this line is throwing an error when I directly come to this component from menu 
      const data = props.data;
      return  custData : data ;
    
    return null;
  

如果我直接进入该组件，如何检查不执行上述逻辑的条件。

【参考方案1】：

检查数据是否存在

 if (props?.data)

【参考方案2】：

您可以像这样仔细检查：

if (props.data && props.data.length)

【讨论】：

哦！它是如此简单，但仍然错过了它。非常感谢您的快速帮助。已接受答案

@Nilesh，很高兴知道，它有帮助