当 api 不返回图像 url 时使用 React 进行条件渲染答案

【问题标题】：Conditional rendering with React when api doesn't return image url当 api 不返回图像 url 时使用 React 进行条件渲染
【发布时间】：2019-02-11 09:20:45
【问题描述】：

我正在处理从 Newsapi.org 读取的数据。问题是有时我得到新闻标题，但图片 url 返回 null。

我这样做是为了进行条件渲染，因此当返回变量为空时它会显示另一个图像。当响应为空时，它不显示替换图像。

<div class="col-2">
          { article.urlToImage != 'null' ? 

            <a href={article.url} class="thumbnail">
              <img src={article.urlToImage} class="img-fluid" />
            </a>
          : 
            <a href={article.url} class="thumbnail">
              <img src="http://www.publicengagement.ac.uk/sites/default/files/styles/content_width/public/hero/large-crowd-of-people-small.jpg" class="img-fluid" />
            </a>
          }  
</div>

【问题讨论】：

抱歉，问题到底是什么？是不是有些东西不起作用，或者您只是在寻找以更好的方式编写它的方法？
把这个article.urlToImage != 'null'改成article.urlToImage !== null
或者只是article.urlToImage 如果null 会导致错误值
您可以改用onError。 stackoverflow.com/questions/34097560/…

标签： reactjs

【解决方案1】：

更好的代码将是：

<div class="col-2">
        <a href={article.url} class="thumbnail">
          <img src={article.urlToImage != 'null'? article.urlToImage : 'http://www.publicengagement.ac.uk/sites/default/files/styles/content_width/public/hero/large-crowd-of-people-small.jpg' } class="img-fluid" />
        </a>     
</div>

【讨论】：

【解决方案2】：

'null' 是字符串，您正在使用字符串进行检查。将'null' 更改为null 对象。

{ article.urlToImage != null ?

但是，我只是喜欢：

<a href={article.url} class="thumbnail">
  <img src={article.urlToImage || 'default-path-of-the-image' } class="img-fluid" />
</a>

这满足如果article.urlToImage 为空或未定义，则使用默认图像default-path-of-the-image，否则使用来自article.urlToImage 的图像。

【讨论】：