TypeError: books.map не является функцией реакции - PullRequest
Новая
       1

TypeError: books.map не является функцией реакции

0 голосов
/ 10 июля 2020

Я пытаюсь заставить свой api отображать данные, но он продолжает возвращать ошибку books.map is not a function. Я знаю, что мой массив пуст, когда страница загружается, но ему может потребоваться (books || []), но это тоже не сработало .. какие-нибудь идеи?

Я просто хочу иметь возможность отображать данные в стол, а затем манипулируйте им. Когда я использую console.log (книги), я получаю нужные мне данные, но карта не работает.

Мой код: 

import PropTypes from "prop-types";
import BookService from "../services/BookService";
import Books from "./Books";
import axios from "axios";

import { Table, Container } from "react-bootstrap";

const BooksList = () => {
  const [books, setBooks] = useState([]);
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [booksPerPage, setBooksPerPage] = useState(10);

  useEffect(() => {
    const fetchBooks = async () => {
      const res = await axios.post("http://nyx.vima.ekt.gr:3000/api/books");

      setBooks(res.data);

      console.log(setBooks);

      setLoading(false);
    };

    fetchBooks();
  }, []);

  console.log(books, "BooksList");

  return (
    <Container>
      <div className="container mt-5">
        <h1 className="text-primary mb-3"> Books </h1>
        <Table striped bordered hover size="lg">
          <thead>
            <tr>
              <th>#</th>
              <th>Book Author</th>
              <th>Book Pages</th>
              <th>Book Publication City</th>
              <th>Book Publication Country</th>
              <th>Book Publication Year</th>
              <th>Book Title</th>
            </tr>
          </thead>
          {books.map(book => (
            <tbody>
              <tr>
                <td>{book.id}</td>
                <td>{book.book_pages}</td>
              </tr>
            </tbody>
          ))}
        </Table>
      </div>
    </Container>
  );
};

export default BooksList;

Ответы [ 2 ]

1 голос
/ 10 июля 2020

Как сказал Джей, вы должны сделать setBooks(res.data.books), но я бы также посоветовал вам контролировать ошибку из результата API, если API не работает, интерфейс должен знать, как управлять этими ошибками вместо сбоя. Один из способов сделать это - проверить, является ли контекст res.data.books массивом или нет.

Ваш полный код должен выглядеть примерно так: 

import PropTypes from "prop-types";
import BookService from "../services/BookService";
import Books from "./Books";
import axios from "axios";

import { Table, Container } from "react-bootstrap";

const BooksList = () => {
  const [books, setBooks] = useState([]);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [booksPerPage, setBooksPerPage] = useState(10);

  useEffect(() => {
    const fetchBooks = async () => {
      try {
        setError(false);
        setLoading(true);
        const res = await axios.post("http://nyx.vima.ekt.gr:3000/api/books");

        setBooks(res.data.books);

        console.log(setBooks);

        setLoading(false);
      } catch(err) {
        console.log(err);
        setError(true);
        setLoading(false);
        setBooks([]);
      }
    };

    fetchBooks();
  }, []);

  console.log(books, "BooksList");
  
  if(error) return <div>Error message</div>

  return (
    <Container>
      <div className="container mt-5">
        <h1 className="text-primary mb-3"> Books </h1>
        <Table striped bordered hover size="lg">
          <thead>
            <tr>
              <th>#</th>
              <th>Book Author</th>
              <th>Book Pages</th>
              <th>Book Publication City</th>
              <th>Book Publication Country</th>
              <th>Book Publication Year</th>
              <th>Book Title</th>
            </tr>
          </thead>
          {books.map(book => (
            <tbody>
              <tr>
                <td>{book.id}</td>
                <td>{book.book_pages}</td>
              </tr>
            </tbody>
          ))}
        </Table>
      </div>
    </Container>
  );
};

export default BooksList;
0 голосов
/ 10 июля 2020

Вы должны установить такие данные, потому что все данные ответа находятся в книгах свойствах 

setBooks(res.data.books);
...