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。