时间戳

首页 > 解决方案 > 类型错误：通过 API 映射时无法读取未定义

reactjs - 类型错误：通过 API 映射时无法读取未定义

问题描述

我正在开发一个使用 NYT books API 的 React 应用程序（它将是一个可搜索的应用程序）。我成功添加了它，但是当我按照我的教程映射 API 时，我收到一个错误类型错误无法读取未定义的映射。

我查看了 API 的 JSON 以确保我使用点表示法调用了正确的字段，看起来我是这样，并且我还尝试了其他几个选项。我的代码如下，谢谢！

import React, {useEffect, useState} from 'react';
import './App.css';
import Book from './Book.js';



const App =  () => {


const APP_ID = "4f3f9c74-74cd-4bc4-a21d-80ac92d41a29";



const [books, setBooks] = useState([]);


useEffect (()=> {
getBooks();

},[]);

const getBooks = async () => {
const response = await fetch("https://api.nytimes.com/svc/books/v3/lists/current/hardcover-fiction.json?api-key=hAzLGYxE9ydMH30QAdJYNIF333jiz0nX");
const data = await response.json();

console.log(data);

};

return(
  <div className="App">
<form className="search-form">
<input className="search-bar" type="text"></input>
<button className="search-button" type="submit">Search</button>

</form>
{Object.results.books.map(book =>(
<Book />
))}  

  </div>


);


};


export default App;

标签： reactjsapi

解决方案

在您的应用呈现时，数据尚未准备好，因为您正在发出网络请求

尝试使用三元运算符

data ? data.map(()=>{
  //
})
: null

对于您的情况，我不包含您的响应数据，因此请尝试以下两个片段中的任何一个：

{Object ? Object.results.books.map(book =>(
<Book />
)) : null}

或者

{Objec.results ? Object.results.books.map(book =>(
<Book />
)) : null}

推荐阅读