javascript - 如何获得 react 返回元素的长度？

Question

我想获取 {book.volumeInfo.description} 元素的长度来检查描述是否为空(if {book.volumeInfo.description} >0 {...} else { "Book without description "

我不知道如何以正确的方式获取此 {book.volumeInfo.description} 元素的长度。你有什么理由如何解决这个问题？

App.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import axios from "axios";
import 'bootstrap/dist/css/bootstrap.min.css';


const App = () => {
const [searchTerm, setSearchTerm] = useState("");
const [books, setBooks] = useState({ items: [] });
const onInputChange = e => {
    setSearchTerm(e.target.value);
};

let API_URL = 'https://www.googleapis.com/books/v1/volumes';

const fetchBooks = async () => {
    const result = await axios.get(`${API_URL}?q=${searchTerm}`);
    setBooks(result.data);
};

const onSubmitHandler = e => {
    e.preventDefault();
    fetchBooks();
};



return (
    <section>
        <form onSubmit={onSubmitHandler}>
            <label>
                <span>Search for books</span>
                <input
                    type="search"
                    placeholder="microservice, restful design, etc.,"
                    value={searchTerm}
                    onChange={onInputChange}
                />
                <button type="submit">Search</button>
            </label>
        </form>
        <ul>
            {books.items.map((book, index) => {
                return (
                    <div>




                        <div class="row">
                            <div class="col-12">
                                <center>  <h5>{book.volumeInfo.title}</h5> 
</center>
                                <center>  <h5>{book.volumeInfo.categories} 
</h5></center>
                                <center>  <h5>{book.volumeInfo.authors} 
</h5></center>
                                <center>  <h5>{book.volumeInfo.language} 
</h5></center>
                                <center>  <h5> 
{book.volumeInfo.publishedDate}</h5></center>
                                <center>  <h5> 
{book.volumeInfo.description}</h5></center>

                            </div>
                        </div>




                                <img

                                alt={`${book.volumeInfo.title} book`}
                                src= 
{`http://books.google.com/books/content?id=${
                                    book.id

}&printsec=frontcover&img=1&zoom=1&source=gbs_api`}
                                />
                                <hr />


                    </div>




                );
            })}
        </ul>
    </section>
   ); 
};
export default App;

Answer 1

您可以使用三元运算符有条件地显示您需要的文本。

<h5>
  {book.volumeInfo.description && book.volumeInfo.description.length > 0 ? book.volumeInfo.description : "Book without description"}
</h5>

编辑以检查未定义，感谢 Dany。