时间戳

首页 > 解决方案 > 如何为 React 中现有的 Fetch API 调用添加数据的条件代码？

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

问题描述

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

所以我创建了一个单独的 JS 文件，它是一个图像 URL 数组，用于将确切的 API 属性名称连接到图像 url。

例如：

外部 images.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 />
)
}

有没有办法在其中编写条件代码来显示缺少图像的数据记录的一般图片？？？？因为我无法到达所有 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"

我吓坏了，因为这是几个小时后到期的。谢谢！

标签： javascriptreactjsconditional-statements

解决方案

你很亲密。尝试：

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

推荐阅读