TypeError: Cannot read property 'url' of null in React

Question

使用 React 和 styled 组件。

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

 <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 而没有徽标。因此在许多情况下数据将为空。虽然我已经提出了条件，但我仍然得到错误。如何处理这个问题？

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

Answer 1

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

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

Answer 2

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

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

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

TypeError: Cannot read property 'url' of null in React

TypeError: Cannot read property 'url' of null in React

javascript

null

reactjs