TypeError: невозможно прочитать свойство url со значением null в React

Question

Работа с компонентами React и styled.

Я пробую условный рендеринг для lo go. В моем реагирующем компоненте <Header> должен отображаться только тогда, когда нет lo go. Здесь lo go проверяется как 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>

Problem TypeError: Cannot read property 'url' of null. Во многих случаях в качестве заголовка будет отображаться только name, а не lo go. Таким образом, во многих случаях данные будут нулевыми. Хотя я поставил условие, все равно получаю ошибку. Как решить эту проблему?

Ожидается Отображать заголовок только при отсутствии lo go. Когда есть lo go, игнорировать заголовок и отображать только lo go.

Answer 1

То, что вы сделали, будет проверять только, не является ли lo go .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>

Надеюсь, это решит вашу проблему. Вам также необходимо убедиться, что он не равен нулю, кроме неопределенности.

Answer 2

Вы не проверяете, существует ли companies[currentCompanyIndex].logo, поэтому вы получаете эту ошибку.

У вас должна быть эта проверка как внутри компонента Header, так и снаружи (где вы визуализируете lo go)