我正在尝试从我的API接收图书ID列表。对于每个图书ID,我想从Google的图书API获取其数据。一旦所有的图书信息已检索,我想为他们呈现div。但是,加载状态在每次提取完成之前被改变。有人能解释一下为什么会这样吗
function ReadingListPage({ userID }) {
const [books, setBooks] = useState([]);
const [isLoading, setIsLoading] = useState(true);
let bookIds = [];
useEffect(() => {
const getBookInfo = async (bookId) => {
const response = await fetch(`https://www.googleapis.com/books/v1/volumes/${bookId}`);
const resJson = await response.json();
setBooks([...books, resJson]);
Promise.resolve();
};
const getBookIds = async () => {
const response = await fetch(`//localhost:3001/user/reading_list/${userID}`);
const resJson = await response.json();
bookIds = resJson;
await Promise.all(
bookIds.map(async (bookId) => {
await getBookInfo(bookId);
})
);
setIsLoading(false);
};
getBookIds();
}, []);
return (
<ContentLayout>
<BookDisplay>
{!isLoading && <BookSection name={"Your Reading List"} books={books}></BookSection>}
</BookDisplay>
</ContentLayout>
);
}
2条答案
按热度按时间cvxl0en21#
我想在所有的书都装上之前它是不会显示的。只是你的账本太多了。我试着这样重写:
这样,您只需为books设置一次新值,而不会覆盖它。
1rhkuytd2#
试试这个代码,希望对你有用