Как правильно использовать троичный оператор в React - PullRequest
Новая
       1

Как правильно использовать троичный оператор в React

0 голосов
/ 05 февраля 2020

Я извлекаю данные из API, который, в зависимости от элемента, на который нажали на моей веб-странице, может содержать или не содержать данные JSON в ключе «описание». Я пытаюсь настроить троичный оператор так, чтобы, если в «описании» присутствовали данные, они отображали эти данные, а если нет - «Нет описания». Это все работает нормально, когда в описании есть данные (условие истинно), но если их нет (условие ложно), разрывается страница.

Есть ли какая-то причина, по которой этот троичный оператор не работает ? 

<div id="popup">
  <h2>{selectedEvent.name}</h2>
  {selectedEvent.descriptions[0].description ? (
  <p>{selectedEvent.descriptions[0].description}</p>
    ) : <p>No description</p>
}
</div>

Спасибо

Ответы [ 2 ]

2 голосов
/ 05 февраля 2020

Всегда проверяйте наличие ключей внутри предметов 

  const description = electedEvent.descriptions[0];
  return (
   <div id="popup">
    <h2>{selectedEvent.name}</h2>
     {description && description.description ? (
       <p>{description.description}</p>
     ) : <p>No description</p>
    }
   </div>
)
0 голосов
/ 05 февраля 2020

Проверьте этот пример выше: 

 function getFee(isLoyalMember) {
      return (isLoyalMember ? '$2.00' : '$10.00'); // here the first output gets 
                                                  //returned if member is not 
                                                 //loyal. If customer is loyal, we 
                                                //return $10.00 instead.
    }

Давайте запишем это в лог и увидим вывод: 

    console.log(getFee(true));
    // expected output: "$2.00"

    console.log(getFee(false));
    // expected output: "$10.00"

    console.log(getFee(1));
    // expected output: "$2.00"

Чтобы заставить вас работать. Сделайте следующее: 

  const description = electedEvent.descriptions[0];
  return (
   <div id="popup">
    <h2>{selectedEvent.name}</h2>
     {description && description.description ? (
       <p>{description.description}</p>
     ) : <p>No description</p>
    }
   </div>
)
...