无法呈现 API 数据，使用 Google 书籍 API 时出现 .map 错误

Question

刚接触 React，仍在学习中。我试图使用 Google Books API 制作这个 Book Finder 应用程序，然后当我想映射数据时，第一次一切正常，但之后有一次我开始收到此错误：

请记住，我第一次运行代码一切正常时，我什至修复了一些 CSS 属性，它重新呈现得很好。我尝试了很多东西，我知道你不能在对象上使用 .map，我检查过，API 数据是对象。

给定 API 数据的 typeof() 结果

代码如下：

MainContainer.tsx

import { useState } from "react";
import List from "./List";
import Search from "./Search";
import request from "superagent";

export default function MainContainer() {

    const [books, setBooks] = useState([]);

    function handleChange(e: any) {
        setBooks(e.target.value);
    }

    function handleSearch(e: any) {
        e.preventDefault();
        request
            .get("https://www.googleapis.com/books/v1/volumes")
            .query({ q: setBooks })
            .then((data) => {
                setBooks([...books])
            })
    }

    return (
        <div className="main-container">
            <Search
                handleChange={handleChange}
                handleSearch={handleSearch}
            />
            <List books={books}/>
        </div>
    )
}

List.tsx

import Card from "./Card"

export default function List(props: any) {

    return (
        <div className="list-container">

            {

                props.books && props.books.length > 0 ?
                    props.books.map(function (book: any) {
                        return (
                            <Card
                                key={book.id}
                                image={book.volumeInfo.imageLinks.smallThumbnail}
                                title={book.volumeInfo.title}
                                author={book.volumeInfo.authors}
                                published={book.volumeInfo.publishedDate}
                            />
                        )
                    }) : <p className="np-data">No books yet...</p>
            }

        </div>
    )
}

Card.tsx

export default function Card(props: any) {
    return (
        <div className="card">

            <img src={props.image} alt="" />
            <div className="card-desc">

                <h3 className="title">{props.title}</h3>
                <h4 className="author">{props.author}</h4>
                <p className="published">{props.published}</p>

            </div>

        </div>
    )
}

同样，我仍在学习 React，这可能是一些愚蠢的打字错误，所以是的。提前致谢！

Answer 1

问题是您在这里有两个状态（搜索查询和图书列表），但是您使用一个变量 (books) 来跟踪两者。

在 MainContainer 组件中，添加它以创建另一个状态变量。

const [query, setQuery] = useState('');

将 handleChange 更新为此以更新搜索查询变量。

function handleChange(e: any) {
  setQuery(e.target.value);
}

将 handleSearch 更新到此以使用上次输入的查询发出请求并正确设置 books 状态变量。

function handleSearch(e: any) {
  e.preventDefault();
  request
    .get("https://www.googleapis.com/books/v1/volumes")
    .query({ q: query})
    .then((data) => {
      setBooks(data.items)
    })
 }

现在应该可以正常工作了。

无法呈现 API 数据，使用 Google 书籍 API 时出现 .map 错误

Cant render API data, .map error using Google Books API

javascript

reactjs

array.prototype.map