Как написать условный код для добавленных данных в существующий вызов API Fetch в React?

Question

Итак ... Короче говоря, я использую API, который имеет 714 строк данных и, к сожалению, не включает URls изображения. Нет никакого способа, которым я могу ввести URL для каждой строки API или каждого объекта в массиве данных.

Поэтому я создал отдельный файл JS, который представляет собой массив URL-адресов изображений, которые я использую для подключения точного свойства APIимя к URL-адресу изображения.

Например:

Внешние изображения. js

const Images = {
  "Canis lupus familiaris": {
    image:'https://cdn.pixabay.com/photo/2018/03/08/23/14/dalmatians-3210166_1280.jpg'
  }
}

Live API:

[
  {
    "science_name": "Canis lupus familiaris"
}
]

Я знаю, что это некрасиво но внутри цикла карты данных у меня есть этот код. :

 let animalList = this.state.dataResults.map((animal, id) => {
  return (
    <img id={id} src={Images[animal.science_name] && Images[animal.science_name].image} aria-hidden />
)
}

Можно ли написать там условный код для отображения общего изображения для записей данных, в которых отсутствует изображение ???? Так как я не могу добраться до всех 714?

Могу ли я поместить туда оператор OR для использования общего изображения.

<img id={id} src={Images[animal.common_name] && Images[animal.common_name].image} || if(no image) then use this general image pic />

ИЛИ поместить оператор if где-нибудь в возвращаемом файле?

let animalList = this.state.dataResults.map ((animal, id) => {return (

if (Images[plant.common_name].image === null) {
    return (or display) "general.img"

) Я волнуюсь, потому что это из-за часов. Спасибо!

Answer 1

Использование троичного оператора

return (
    <img key={id} src={Images[animal.science_name] ? Images[animal.science_name].image : 'http://general.png'} aria-hidden />
)

Answer 2

Вы были близки. Попробуйте:

return (
    <img id={id} src={Images[animal.science_name] && Images[animal.science_name].image || 'http://URL.for/missing.image'} aria-hidden />
)

По сути, то, что входит в {} s, является выражением JavaScript. Поэтому все, что вам нужно сделать, это добавить строку после ||, чтобы, если предыдущее выражение получило ложное значение, оно использовалось.

Вы также можете сделать это другими способами, если только онидопустимые выражения JavaScript, например:

let defaultImage = {image: 'http://URL.for/missing.image'};
let animalList = this.state.dataResults.map((animal, id) => {
  return (
    <img id={id} src={(Images[animal.science_name] || defaultImage).image} aria-hidden />
  )
}