Array.map无法识别数组且不渲染数据问题求助

核心问题 #

你代码里的状态更新逻辑错误：在axios请求成功的回调中，你已经通过const request = response.data.results.books拿到了正确的数据，但调用setBooks(books)时，传入的是初始状态的空数组books，而非新获取的request。这就导致books状态始终是空数组，自然无法渲染出内容。

修复步骤 #

1. 修正状态更新的参数：将setBooks(books)改为setBooks(request)
2. 完善错误处理：在catch回调中更新error状态，确保错误提示能正常触发
3. 可选：添加数据类型校验，避免因接口返回格式变化导致的错误

修复后的完整代码 #

import { useState, useEffect } from 'react';
import axios from 'axios';

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

  useEffect(() => {
    setLoading(true);
    axios
      .get("database.json")
      .then((response) => {
        const request = response.data.results.books;
        console.log("request", request);
        // 修正：传入新获取的request数组
        if (Array.isArray(request)) {
          setBooks(request);
        } else {
          throw new Error("返回的数据不是数组格式");
        }
      })
      .catch(function (err) {
        console.log(err);
        // 完善：更新error状态
        setError(err.message);
      })
      .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>
    </div>
  );
}

export default BookList;

内容的提问来源于stack exchange，提问作者user6488504