Array.map未重新配置阵列且未打印数据

我有一个简单的功能组件,我正在其中制作 .get() call 然后在我的 jsx 我只是 mapping through using .map() 用于打印数据的数组。

但出于某种原因 array 无法识别,并且无法打印数据。

useEffect() 运行良好。它正在注销数据。但是 books array 只是不起作用,我不知道为什么

下面是代码。

 const [books, setBooks] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState();

  useEffect(() => {
    setLoading(true);
    axios
      .get("database.json")
      .then((response) => {
        const request = response.data.results.books;
        console.log("request", request);
        setBooks(books);
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <p>Data is loading...</p>;
  }

  if (error || !Array.isArray(books)) {
    return <p>There was an error loading your data!</p>;
  }

  return (
    <div className="row">
      <h2>LOREN IPSUM</h2>
      <div className="row__posters">
        {books.map((book) => (
          <img
            // onClick={() => handleClick(book)}
            key={book.title}
            className="row__poster row__posterLarge"
            src={book.book_image}
            alt={book.title}
          />
        ))}
      </div>
      {/* {description && <span /> />} */}
    </div>
  

); }