失败的道具类型：道具 `authors` 在 `Book` 中被标记为必需，但其值为 `undefined`

Question

我正在创建一个应用程序，用户可以在其中使用 api 调用来搜索图书。每当我搜索一本书时，我都会收到此错误。原因是因为 authors 数组最初是未定义的。但这不会发生在标题或缩略图上。有什么办法可以解决这个错误吗？

Searchpage.js

import React, { useEffect, useState } from 'react';
import { BsArrowLeftShort } from 'react-icons/bs';
import { debounce } from 'debounce';
import SearchBar from '../components/SearchBar';
import { search } from '../api/BooksAPI';
import Book from '../components/Book';

const SearchPage = () => {
  const [query, setQuery] = useState('');
  const [data, setData] = useState([]);

  const handleChange = (e) => {
    setQuery(e.target.value);
  };

  useEffect(() => {
    const bookSearch = debounce(() => {
      if (query.length > 0) {
        search(query).then((res) => {
          if (res.length > 0) setData(res);
          else setData([]);
        });
      } else {
        setData([]); // make sure data is not undefined
      }
    }, 1000);
    bookSearch();
  }, [query]);

  return (
    <div>
      <SearchBar
        type="text"
        searchValue={query}
        placeholder="Search for a book"
        icon={<BsArrowLeftShort />}
        handleChange={handleChange}
      />
      {console.log(data)}
      {data.map((book) => {
        console.log(book.authors);
        return (
          <Book
            key={book.id}
            title={book.title}
            authors={book.authors}
            thumbnail={book.imageLinks.thumbnail}
          />
        );
      })}
    </div>
  );
};

export default SearchPage;

Book.js

import React from 'react';
import PropTypes from 'prop-types';

const Book = ({ title, authors, thumbnail }) => (
  <div>
    <img src={thumbnail} alt={title} />
    <div>{title}</div>
    <div>{authors}</div>
  </div>
);

Book.propTypes = {
  thumbnail: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  authors: PropTypes.arrayOf(PropTypes.string).isRequired,
};

export default Book;

编辑：这是 promise 响应的屏幕截图。我在承诺链中添加了一个 console.log 。 authers 数组的值不会显示为未定义。请注意，这出现在控制台警告之前。

Answer 1

尝试在所有情况下向 Book 提供所需的属性

authors={book.authors || []}

或将 authors 作为不需要的道具放入 Book 否则

失败的道具类型：道具 `authors` 在 `Book` 中被标记为必需，但其值为 `undefined`

Failed prop type: The prop `authors` is marked as required in `Book`, but its value is `undefined`

javascript

reactjs

components

undefined

react-proptypes