TypeError：无法在 React 中读取 null 的属性“url”

Question

使用React和styled组件。

我正在尝试对徽标进行条件渲染。 在我的反应组件<Header>应该只在没有徽标时呈现。 这里的标志被检查为来自companies数组的companies[currentCompanyIndex].logo.url 。

 <HeaderContainer>
        <Header>
          {!companies[currentCompanyIndex].logo.url &&
            companies[currentCompanyIndex].name}
        </Header>

        {companies[currentCompanyIndex].logo.url && (
          <Logo
            src={companies[currentCompanyIndex].logo.url}
            alt={`${companies[currentCompanyIndex].logo.url}-img`}
          />
        )}
 </HeaderContainer>

问题TypeError: Cannot read property 'url' of null 。 在许多情况下，只有name呈现为 header 而没有徽标。 因此，在许多情况下，数据将为 null。 虽然我已经提出了条件，但我仍然得到错误。 如何处理这个问题？

仅在没有徽标时才预期呈现 header。 有 logo 时，忽略 header，只渲染 logo。

Answer 1

您没有检查companies[currentCompanyIndex].logo存在，这就是您收到此错误的原因。

您应该在 Header 组件内部和外部（渲染徽标的位置）都进行检查

Answer 2

您所做的只会检查 logo.url 是否未定义。 它不会检查它是否是 null。 编辑您的代码，如下所示：

<HeaderContainer> <Header> {!companies[currentCompanyIndex].logo.url &&  companies[currentCompanyIndex].name} </Header> {companies[currentCompanyIndex].logo.url && companies[currentCompanyIndex].logo.url !== null && ( <Logo src={companies[currentCompanyIndex].logo.url} alt={`${companies[currentCompanyIndex].logo.url}-img`} /> )} </HeaderContainer>

我希望这能解决你的问题。 除了未定义之外，您还需要检查它是否不是 null。