如何知道React js中的组件渲染条件

Question

我也有一个正在渲染为子级的组件，或者用户可以直接从UI菜单导航到该组件。我现在面临的一个问题是，如果该组件作为子组件，则可以正常工作，但是当我单击菜单直接导航时，我的getDerivedStateFromProps（）函数将引发错误，如[

TypeError：无法读取未定义的属性'length'

下面是我的代码。如果我将数据从父组件发送到此组件并从父组件进行渲染，它将很好地工作。

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;
  }

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

Answer 1

您可以像这样仔细检查：

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

Answer 2

检查以查看数据是否存在

 if (props?.data)