Javascript 如何为React中现有的Fetch API调用中添加的数据编写条件代码？

所以…长话短说，我使用的API有714行数据，不幸的是不包括图像URL。我无法为数据数组中的每个API行或每个对象输入URL

因此，我创建了一个单独的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'
  }
}

实时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 />
)
}

我吓坏了，因为几个小时后就要交了。谢谢大家!

你很接近。尝试：

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

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

使用三元运算符

返回(
)

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

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 />
  )
}

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