有问题的反应项目，其他组成员可以编译，并正确工作。

Question

你好，这是我遇到的错误。

捕捉到的TypeError:无法在renderWithHooks的图书(books.js:51:1)中读取未定义的属性(读取“地图”)

   <div className="book-list">
                 (line 51)  {books.data.map((book) => (
                        <NavLink key={book.book_id} className={({isActive}) => isActive ? "active" : ""} to={`/books/${book.book_id}`} >
                            <span>&nbsp;</span>
                            <div>{book.title}</div>
                        </NavLink>
                        ))}
                </div>

我试图更新我的npm文件和重新安装，但没有joy。我的学校小组的其他成员没有这方面的问题，我们似乎找不到工作，尽管我们是从相同的GIT来源！

我们网站上的其他页面对我来说显示得很好，但出于某些原因，书籍页面没有显示。这是该页的完整代码。

import {settings} from "../../config/config";
import {useState, useEffect} from 'react';
import {NavLink, useLocation, Outlet} from "react-router-dom";
import './book.css';
import useXmlHttp from "../../services/useXmlHttp";
import {useAuth} from "../../services/useAuth";
import Pagination from "./pagination";

import React from 'react';

const Books = () => {

    const {user} = useAuth();
    const {pathname} = useLocation();
    const [subHeading, setSubHeading] = useState("All Books");
    //const url = settings.baseApiUrl + "/books";
    const [url, setUrl] = useState(settings.baseApiUrl + "/books");

    const {
        error,
        isLoading,
        data: books
    } = useXmlHttp(url, "GET", {Authorization: `Bearer ${user.jwt}`});

    useEffect(() => {
        setSubHeading("All Books");
    }, [pathname]);

    return (
        <>
            <div className="main-heading">
                <div className="container">Book</div>
            </div>
            <div className="sub-heading">
                <div className="container">{subHeading}</div>
            </div>
            <div className="main-content container">

                {error && <div>{error}</div>}
                {isLoading && <div className="image-loading">
                    <img src={require(`../loading.gif`)} alt="Loading ......"/>
                    </div>}
                {books && <div className="book-container">
                    <div className="book-list">
                        {books.data.map((book) => (
                            <NavLink key={book.book_id} className={({isActive}) => isActive ? "active" : ""} to={`/books/${book.book_id}`} >
                                <span>&nbsp;</span>
                                <div>{book.title}</div>
                            </NavLink>
                            ))}
                    </div>

                    <div className="book-item">
                        {books && <Pagination books={books} setUrl={setUrl}/>}
                        <Outlet context={[subHeading, setSubHeading]} />
                    </div>
                </div>}
            </div>
        </>
    );
};

export default Books;

超级令人沮丧，任何帮助都将不胜感激。

Answer 1

这是数据问题。遇到此错误的人对于books有一个真实的值，但是books没有一个.data字段。

记录books以查看数据到底是什么。