Javascript 来自API的带有React的空响应

我正在使用GoogleBooksAPI获取数据。当我点击按钮获取数据时，响应是一个空数组。我不知道异步函数有什么问题

导出默认函数SearchInput（）{
常量[inputSearch，setInput]=useState（“”）
const[bookSearch，setBookSearch]=useState（[]）
//用于从API检索数据的异步函数
常量fetchBooks=async（）=>{
const res=等待取数(
`https://www.googleapis.com/books/v1/volumes?q=flowers+inauthor:keyes&key=${apikey}`
);
const data=wait res.json（）；
setBookSearch（图书搜索）；
console.log（bookSearch）；//显示一个空数组
}
//搜索功能
常量handleSearch=（e）=>{
e、 预防默认值（）；
取书（）；
}    
返回(
搜索簿
libro:{inputSearch}

//这将触发搜索功能
{setInput（e.target.value）}/>
搜寻
);
}

在您的

fetchBooks（）

中，每次通过调用

setBookSearch（bookSearch）

将

bookSearch

状态设置为自己的值。由于默认情况下

bookSearch

的值是空数组，因此每次都将是空数组。确保使用获取的

数据更新状态：

const fetchBooks=async（）=>{
const res=等待获取（URL）；
const data=wait res.json（）；
setBookSearch（数据）；
console.log（bookSearch）；//尚未设置！
};

您还尝试在“更新”状态后立即记录该状态。不要忘记，
useState
是异步的，就像类组件中的
setState
一样。您不能在一行上更新状态，而假定它在下一行上已更改。您可能会记录未更改的状态。如果要在新值更改后记录它，可以使用
useffect
hook.
，因为您告诉它：
const[bookSearch，setBookSearch]=useState（[]）
所以
bookSearch
以空数组开始，并且永远不会更改值。