Question

在我使用React进行开发时，我遇到了这个问题：

我从远程API检索某些数据，并提供相关信息来描述一本书：http://api.rsywx.com/book/randomBook/1。这将返回一个JSON字符串：

{"status":200,"out":[{"bookid":"00637","title":"\u4e2d\u56fd\u53e4\u4ee3\u601d\u60f3\u53f2","author":"\u6768\u8363\u56fd","region":"\u4e2d\u56fd\u5927\u9646","purchdate":"1973-09-13"}]}

在此返回之外，我填充state对象并在页面中显示该书。

有一件事是我需要显示与该书相关的书籍封面。我没有为API中存储的所有书籍（因此随机返回）提供封面。

如果有封面图片，我可以通过以下方式安全地显示该图像：

    <img
        className="ls-l"
        src={this.state.cover}
    .../>

从cover填充

bookid。

但如果没有，我必须显示default.jpg作为后备。

所以基本上我需要检查this.state.cover文件是否存在。

任何输入都将非常感激。

更新

感谢下面的所有输入。

我认为可能是因为我没有清楚自己。

无论我的服务器端是否存在图片文件，this.state.cover都会填充bookid，即{＆＃34; http://myserver/img/12345.jpg＆＃34;的形式，其中12345是bookid。

真实情况是文件12345.jpg存在，但54321.jpg不存在。

因此，在我的<img>标记中显示图片之前，我必须将54321.jpg替换为default.jpg。我认为这是一个与文件管理有关的问题。

以下方法假设未设置cover字段，这在我的代码中并非如此。

尽管如此，谢谢大家。

Answer 1

两种不同的方式：

let {cover = "fallback.jpg"} = this.state;

或者

src={this.state.cover || "fallback.jpg"}

或者你使用monadic功能编程的优点来摆脱空检查。

Answer 2

         fetch(url,{}) 
              .then( (response)=> response.json())
                   .then((book) => this.setState({
                             picture: book.picture || defaultCover.jpg   
                                }))

您可以在此处使用常规||运算符。这样可以正常工作。但请确保订购。在pic1 || pic2首先检查pic1。如果未定义，则为pic2。

Answer 3

使用条件运算符检查封面属性是否存在。使用类似的东西，

const defaultImage = "some-url";
<img
        className="ls-l"
        src={this.state.cover ? this.state.cover : defaultImage}
    .../>

检查图像文件是否存在，如果没有，则加载另一个默认文件

3 个答案: