reactjs - 如何在 React 中映射 JSON 对象数组？

Question

我从 API 返回中获得了一个 JSON 对象数组，但现在我无法获取其中一个数组的元素。在这里，我试图显示来自 docs 数组（20 个元素）的数据：

return(
 <ul>
  {books.docs.map((book, idx) => {
    return (
      <li key={idx}>
        <h3>{book.docs[idx].title}</h3>
        <p>{book.docs.creator[0]}</p>
      </li>
    );
  })}
 </ul>);

API 返回

我不断收到地图函数错误：“books.map 不是函数”或“无法读取未定义的属性映射”，其中“books”是一个对象，它为我提供屏幕截图中的数据。关于如何解决问题的任何建议？

更新：这是我获取数据的方式：

  const Books = () => {

  const [books, setBooks] = useState([]);
  const [loading, setLoading] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");

  const fetchBooks = async () => {
    setLoading(true);
    try {
      const result = await axios.get(`${API_URL}`);
      setBooks(result.data);
    }
    catch (error) {
      setError(true);
    }
    setLoading(false);
  };

  const onInputChange = e => {
    setSearchTerm(e.target.value);
  }

  const onSubmitHandler = e => {
    e.preventDefault();
    fetchBooks();
  }

    return (
      <div>
        <div>
          <Search onSubmitHandler={onSubmitHandler} searchTerm={searchTerm} onInputChange={onInputChange} error={error} />
        </div>
        <div>
          <Loader loading={loading}>
            Fetching
          </Loader>
          <BookList books={books} />
        </div>
      </div>
    );}

标签： reactjs

Answer 1

你可以试试这个：

如果您的任何书籍对象为空。

return books.docs.length ?(
  <ul>
    {books.docs.map((book, idx) => {
      return book ? (
        <li key={idx}>
          <h3>{book.title ? book.title : ""}</h3>
          <p>{book.creator ? book.creator[0]:""}</p>
        </li>
      ) : null;
    })}
  </ul>
):null;