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

【问题标题】：Failed prop type: The prop `authors` is marked as required in `Book`, but its value is `undefined`失败的道具类型：道具`authors`在`Book`中被标记为必填，但其值为`undefined`
【发布时间】：2021-05-19 22:13:00
【问题描述】：

我正在创建一个应用程序，用户可以在其中使用 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;

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

【问题讨论】：

看起来search(query) 返回了一个未定义authors 键的对象...
或者更具体地说，res 是一个没有authors 属性的对象数组。 res 响应的形状和值是什么？（检查网络选项卡或只是控制台将其登录到 Promise 链中。
@Dominik 是的，可能是这样，但我仍然很困惑
@DrewReese 我已经对我的问题进行了编辑，我已经发布了上面回复的 console.log 的屏幕截图。如您所见，作者数组已填充。这出现在控制台中的警告之前
所有 20 个对象都需要定义的 authors 属性。如果其中任何一个没有authors 将触发 PropTypes 警告/错误的属性。

标签： javascript reactjs components undefined react-proptypes

【解决方案1】：

在所有情况下都尝试提供预订其所需的属性

authors={book.authors || []}

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

【讨论】：