类型错误：无法读取 React 中空的属性'url'

Question

使用React和styled组件。

我正在尝试一个标志的条件渲染。在我的react组件中，<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被渲染为标题，而没有徽标。因此，在许多情况下，数据将为空。虽然我已经提出了条件，但我还是得到了错误。如何处理这个问题？

需要只有在没有徽标时才渲染标头。如果有徽标，则忽略标题并仅渲染徽标。

Answer 1

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

您应该在页眉组件内部和外部(您渲染徽标的地方(进行检查

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>

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