如何获得反应返回元素的长度？

Question

我想获得 {book.volumeInfo.description} 元素的长度来检查描述是否为空（如果 {book.volumeInfo.description} >0 {...} else { "Book without description"}我不知道如何以适当的方式获得此 {book.volumeInfo.description} 元素的长度。你有什么理由来解决这个问题吗？应用程序.jsimport 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> 

Answer 1

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

<h5>

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

</h5>

编辑以检查未定义，谢谢丹妮。

Answer 2

在使用之前，请确保您拥有此对象（“book.volumeInfo.description”）并且自然也是对象，

    <h5>{typeof(book.volumeInfo.description) == "object" && book.volumeInfo.description && 

book.volumeInfo.description.length > 0 ? book.volumeInfo.description : 'book without description'}</h5>